# Can we arrange the subcategories like this?

**URL:** <https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917>\
**Category:** Development\
**Tags:** css\
**Created:** [June 13, 2024, 1:17pm UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917 "2024-06-13T13:17:43Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)\
**Post date:** [June 13, 2024, 1:17pm UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917/1 "2024-06-13T13:17:44Z")

</div>

Hi helpful friends.

This is how I use it now. `display : flex`

 ![Ekran görüntüsü 2024-06-13 160953](https://global.discourse-cdn.com/meta/original/4X/e/e/6/ee61e66a56d3109fedbdb645705e1c0409375c4a.png)

Can we do it like this?

 ![How](https://global.discourse-cdn.com/meta/original/4X/9/3/3/933ee079bea7779b04908e2f66a60e21846c33a4.png)

But not like that. `display : block`

 ![Ekran görüntüsü 2024-06-13 161553](https://global.discourse-cdn.com/meta/original/4X/1/f/7/1f785d71bc95678349957704f011b757bbcb35f6.png)

Thank you 🙏

---

<div class="post-metadata">

**Author:** ![bartv](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bartv/32/130052_2.png) [@bartv](https://meta.discourse.org/u/bartv)\
**Post date:** [June 13, 2024, 6:13pm UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917/2 "2024-06-13T18:13:04Z")

</div>

That looks SO much better 🤩

---

<div class="post-metadata">

**Author:** ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)\
**Post date:** [June 13, 2024, 7:07pm UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917/5 "2024-06-13T19:07:50Z")

</div>

I found the solution this way.  
But when the subcategory name is long, it breaks.  
I’m waiting if anyone can find a solution to this.  
You can use it in this state. 🙂

When long name.

 ![Ekran görüntüsü 2024-06-13 220505](https://global.discourse-cdn.com/meta/original/4X/c/4/4/c4428950e28100974c15572cde214198199d49df.png)

When short name.

 ![Ekran görüntüsü 2024-06-13 220610](https://global.discourse-cdn.com/meta/original/4X/b/5/2/b524a711c96c75f0473e68a0ba3326f61128aa98.png)

```plaintext
.category-list .subcategories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

```

```plaintext
.category-list .subcategories .subcategory {
    flex-shrink: 0;
    min-width: 25%;
}

```

---

<div class="post-metadata">

**Author:** ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/179824_2.png) [@Alteras](https://meta.discourse.org/u/Alteras)\
**Post date:** [June 13, 2024, 7:13pm UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917/6 "2024-06-13T19:13:22Z")

</div>

You’ll want to use CSS Grids here.

Something like:

```css
.category-list .subcategories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, min-content));
}

```

If you want the columns to be perfectly equal size, you can change `min-content` to `1fr`.

---

<div class="post-metadata">

**Author:** ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)\
**Post date:** [June 13, 2024, 7:15pm UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917/7 "2024-06-13T19:15:19Z")

</div>

Now this is much better. Thank you @Alteras 🙏

---

<div class="post-metadata">

**Author:** ![saurabhmithal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saurabhmithal/32/378295_2.png) [@saurabhmithal](https://meta.discourse.org/u/saurabhmithal)\
**Post date:** [June 14, 2024, 3:07am UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917/8 "2024-06-14T03:07:18Z")

</div>

> [@Alteras](#):
>
> ```plaintext
> .category-list .subcategories {
> display: grid;
> grid-template-columns: repeat(auto-fill, minmax(125px, min-content));
> }
> 
> ```

how can I add this to the theme in my community.

can someone help?

thanks.

---

<div class="post-metadata">

**Author:** ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)\
**Post date:** [June 14, 2024, 1:48pm UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917/9 "2024-06-14T13:48:45Z")

</div>

![Ekran görüntüsü 2024-06-14 164803](https://global.discourse-cdn.com/meta/original/4X/a/2/9/a29cfe05bab51bfe8bf34ebb2daf0733f30a63a9.png)  
Here in CSS write and save

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [June 14, 2024, 2:27pm UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917/10 "2024-06-14T14:27:24Z")

</div>

As ogulcan1787 stated, you can create a new component and insert the CSS there.

You can follow these instructions:

- Go to Admin → Customize

- Click on Install button  

- Then attach it to your theme and click on Edit CSS/HTML button  

- Use the `CSS` section:

---

<div class="post-metadata">

**Author:** ![saurabhmithal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saurabhmithal/32/378295_2.png) [@saurabhmithal](https://meta.discourse.org/u/saurabhmithal)\
**Post date:** [June 18, 2024, 2:03am UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917/11 "2024-06-18T02:03:02Z")

</div>

thank you @Arkshine

this was helpful.

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [July 18, 2024, 2:03am UTC](https://meta.discourse.org/t/can-we-arrange-the-subcategories-like-this/311917/12 "2024-07-18T02:03:27Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.