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:
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.
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
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
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.
Last updated