> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/how-to-guides/how-to-set-up-custom-columns.md).
# How to set up custom columns
Many Helix sections and blocks — product lists, collection lists, blog lists, multi-columns, masonry, carousels, and more — let you set **how many columns show at each screen size** instead of a single desktop/mobile value. This is the **Columns per breakpoint** setting.
***
## The Breakpoints
Helix uses six breakpoints. Each key covers a range of screen widths:
| Key | Screen width | Typical device |
| ----- | ------------- | ------------------ |
| `xs` | 0 – 479px | Small phones |
| `sm` | 480 – 767px | Large phones |
| `md` | 768 – 1024px | Tablets |
| `lg` | 1025 – 1279px | Small laptops |
| `xl` | 1280 – 1440px | Laptops / desktops |
| `xxl` | 1441px and up | Large desktops |
***
## Setting Columns per Breakpoint
Turn on **Custom columns** in the section or block, then fill in the **Columns per breakpoint** field.
**Format:** `xs:2, sm:2, md:3, lg:4, xl:4, xxl:6`
Each pair sets the number of columns for that screen size. You only need to list the breakpoints you want to override — any breakpoint you leave out keeps the default column count for that range.
| Rule | Behavior |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| Empty / omitted breakpoint | No override — falls back to the default columns for that range. |
| Value below `1` | Skipped (a grid can't render zero columns). |
| Upper limit | None — but keep values sensible for the available width. |
| Decimals (e.g. `4.5`) | Kept **only** for carousels on `lg`, `xl`, `xxl` to create a "peek" of the next slide. Every other layout floors them to a whole number. |
**Examples**
| Value | Result |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `xs:1, sm:2, md:3, lg:4, xl:4.5, xxl:5` | The value shown above: 1 column on small phones, 2 on large phones, 3 on tablets, 4 on small laptops, 4 full slides plus a peek of the 5th on laptops (carousel only), and 5 on large desktops. |
| `md:2, xl:4` | Only tablets and laptops are overridden; every other size keeps the section default. |
***
## Tips
{% hint style="success" %}
* Start from the smallest screen (`xs`) and work up — you only need to add a breakpoint where the layout should change.
* You don't have to list all six breakpoints. List only the ones you want to override.
{% endhint %}
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}