Can we arrange the subcategories like this?

[ogulcan1787]

Hi helpful friends.

This is how I use it now. display : flex

Can we do it like this?

But not like that. display : block

Thank you

[bartv (Bart)]

That looks SO much better

[ogulcan1787]

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.

When short name.

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

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

[Alteras (Steven Chang)]

You’ll want to use CSS Grids here.

Something like:

.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.

[ogulcan1787]

Now this is much better. Thank you @Alteras

[saurabhmithal]

@Alteras

.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.

[ogulcan1787]

Here in CSS write and save

[Arkshine]

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:
  

[saurabhmithal]

thank you @Arkshine

this was helpful.