مواصلة النقاش من كيفية تنسيق صفحة /categories؟:
لدي سؤال يتعلق بنقاش أقدم.
ما مدى سهولة تحقيق هذا:
أقرب ما وصلت إليه هو هذا:
بتطبيق column-count: 2 على DIV المحيط بالجدول و display: block على عناصر الجدول.
لكنني لست متأكدًا من كيفية إجبار العنوان على التمدد عبر السطر بالكامل 
تعديل.
لقد أدركت للتو أنه وظيفيًا، سأضطر إما إلى تكرار صف العنوان هذا، أو ترك “التصنيفات” فقط، أو ببساطة إخفاءه بالكامل…
أعتقد أنه قد يكون من الأسهل إذا قمت بتعيين display: block و column-count: 2 لـ tbody؟ عندها سيبقى thead يمتد عبر العرض الكامل.
لكن نعم، في هذه المرحلة ستحتاج إلى إخفاء كل شيء ما عدا “الفئة” على أي حال.
بديل باستخدام الفليكس بوكس:
.category-list tbody {
display: flex;
flex-wrap: wrap;
}
.category-list tbody tr {
width: 50%;
display: flex;
}
.category-list tbody .category {
flex: 1;
}
لا يزال هناك بعض التعديلات التي يجب إجراؤها.
في خضم ذلك، نسيتُ أنه سيكون من الجيد الحفاظ على المحاذاة الأفقية.
هذا رائع 
لاحظ أنه مع هذا التنسيق CSS، لن تُعرض الفئات على النحو التالي:
1 - 4
2 - 5
3 - 6
بل على النحو التالي:
1 - 2
3 - 4
5 - 6
كما تحتاج إلى إضافة استعلام وسائط (media query) لتغيير النمط على الشاشات الصغيرة.
لقد جربتُ الخيارين قليلاً، ويبدو أن تقسيم جدول الفئات إلى نصفين بدلاً من ترتيبها تسلسلياً هو الأنسب لغرضنا.
ومع ذلك، من الصعب التحكم في نقطة التقسيم.
تمكنت من تحقيق ذلك في متصفحي:
ولكن فقط عندما وضعت الفئات على اليسار داخل عنصر div بشكل مصطنع (لمنع التقسيم المبكر جداً، وإلا فإن فئة الجذر “Measure” ستنتقل إلى العمود الأيمن):
هل توجد طريقة لـ “تجميع” الصفوف ذات معرفات الفئات المحددة داخل عنصر div، ربما عبر واجهة برمجة التطبيقات (API) للمظهر؟
ما تطلبه يبدو معقداً وقد يتطلب بعض السحر البرمجي باستخدام JavaScript.
بخصوص خاصية CSS column، أنا واثق من أن الفئات لن تكون متراصة أفقياً (إلا إذا قمت بتعيين ارتفاع ثابت) كما هو الحال مع Flexbox، وهذا لا يبدو جميلاً.
لقد حققت ما تريده، لكن الطريقة المستخدمة فيها بعض الحيل:
استخدمت تنسيقي السابق، ثم أضفت عنصر <tr> فارغاً (أعتقد أنه يمكن فعل ذلك بسطر واحد من JavaScript) وقمت بتعيين خاصية order لتغيير ترتيب عناصر div. يمكن تنفيذ هذا الأخير باستخدام CSS فقط من خلال استهداف كل قيمة data-category-id في HTML. إليك النتيجة:
إليك عنصر <tr> الفارغ:
لاحظ أنك ستحتاج على الأرجح إلى تعديل CSS و/أو JavaScript في كل مرة تضيف أو تحذف فئة.
تعديل: إذا كنت بحاجة إلى عنصر فارغ واحد أو اثنين إضافيين فقط، فلا تحتاج لاستخدام JavaScript لإضافة <tr>، بل يمكنك استخدام :after و/أو :before بهذه الطريقة:
.category-list tbody:after {
width: 1px;
content: "";
}
هذا يضيف عنصراً فارغاً بعرض 1 بكسل يعمل بنفس الطريقة.
شكرًا لك، لقد سار الأمر بشكل جيد جدًا لا مانع لدينا من إدارة الفئات عن كثب، لذا فإن كل شيء على ما يرام.
يمكن رؤية النتيجة النهائية في منتدانا.
هل يمكنك مشاركة رابط المنتدى الخاص بك؟
بالطبع، إنه موجود في ملفي الشخصي ولم أكن أريد الإعلان المباشر 
