# إعادة تصميم عرض الفئات فقط إلى عمودين

**URL:** <https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625>\
**Category:** UX\
**Created:** [14 فبراير 2020، 4:58م UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625 "2020-02-14T16:58:55Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [18 فبراير 2020، 10:23ص UTC](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/7 "2020-02-18T10:23:39Z")

</div>

ما تطلبه يبدو معقداً وقد يتطلب بعض السحر البرمجي باستخدام JavaScript.  
بخصوص خاصية CSS `column`، أنا واثق من أن الفئات لن تكون متراصة أفقياً (إلا إذا قمت بتعيين ارتفاع ثابت) كما هو الحال مع Flexbox، وهذا لا يبدو جميلاً.

لقد حققت ما تريده، لكن الطريقة المستخدمة فيها بعض الحيل:

استخدمت [تنسيقي السابق](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625/3?u=canapin)، ثم أضفت عنصر `<tr>` فارغاً (أعتقد أنه يمكن فعل ذلك بسطر واحد من JavaScript) وقمت بتعيين خاصية `order` لتغيير ترتيب عناصر `div`. يمكن تنفيذ هذا الأخير باستخدام CSS فقط من خلال استهداف كل قيمة `data-category-id` في HTML. إليك النتيجة:

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/d/5d163cb6a81c0e7e6b8a2b9381bfc549ff554832.png)

إليك عنصر `<tr>` الفارغ:

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/8/38f46931d3f42adbc9b40bc2c5933386708913b6.png)

لاحظ أنك ستحتاج على الأرجح إلى تعديل CSS و/أو JavaScript في كل مرة تضيف أو تحذف فئة.

تعديل: إذا كنت بحاجة إلى عنصر فارغ واحد أو اثنين إضافيين فقط، فلا تحتاج لاستخدام JavaScript لإضافة `<tr>`، بل يمكنك استخدام `:after` و/أو `:before` بهذه الطريقة:

```css
.category-list tbody:after {
    width: 1px;
    content: "";
}

```

هذا يضيف عنصراً فارغاً بعرض 1 بكسل يعمل بنفس الطريقة.

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/5/1543d0269e0df1a84eef0e7942bf9852515729ff.png)

---

_[View the full topic](https://meta.discourse.org/t/categories-only-view-remade-into-two-columns/141625)._