# Featured Categories Header

**URL:** <https://meta.discourse.org/t/featured-categories-header/203779>\
**Category:** Theme component\
**Created:** [September 16, 2021, 10:59pm UTC](https://meta.discourse.org/t/featured-categories-header/203779 "2021-09-16T22:59:32Z")\
**Posts on this page:** 1\
**Showing post:** 19

<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:** [November 13, 2023, 11:02pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/19 "2023-11-13T23:02:44Z")

</div>

Something like that?

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/0/c/70c2ddbf139990837781129065ee2d2b007ea875.png)

If so, try this CSS. Add it to your theme CSS or in a component.

Inside, you can see variables you can control.  
You can choose the number of columns, the gap between the elements, and the width of each element.  
The elements are stacking automatically.

```css
.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 6;
    --ch-gap: 2.5em;
    --ch-width: 110px;
    
    display: grid !important;
    
    grid-template-columns: repeat(auto-fill, minmax(var(--ch-width), 0fr));
    gap: var(--ch-gap) !important;
    
    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap))) !important;
}

```

---

_[View the full topic](https://meta.discourse.org/t/featured-categories-header/203779)._