SlowlyColumns
Arrange content side by side in columns, each one a Column block you fill.
The Columns block arranges content side by side, for comparisons, feature grids, or any row of equal parts.
It comes as two blocks: the Columns block is the row, and each Column inside it is one cell you fill with content. Add or remove columns to change the count, and adjust gaps and widths in the block's own settings panel. Column widths and the row's wrapping are breakpoint-aware, so a three-up row on desktop can stack on mobile.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "columns".
- Pick the Columns block; three Column children are added by default.
Settings
In the columns' own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Template Columns | Sets the grid-template-columns value directly, letting you write any column track list | You need unequal widths, fr units, or a fixed-width sidebar alongside a flexible content column |
| Minimum Width | Minimum column width before the grid reflows to fewer columns | Auto-responsive grids where you want columns to wrap gracefully rather than go too narrow |
| Auto-fit | Columns expand to fill available space, collapsing empty tracks | Most auto-responsive use cases; this is on by default |
| Auto-fill | Empty column tracks are preserved even when unused | Keeping a consistent grid skeleton when some cells may be empty |
| Template Rows | Sets the grid-template-rows value | You need fixed or named row heights |
| Column Gap | Horizontal space between columns, defaults to 10 | Changing the breathing room between cells |
| Row Gap | Vertical space between rows when columns wrap, defaults to 10 | Controlling the gap on wrapped or multi-row grids |
| Row Height | Height of each row track, defaults to 100 | Fixed-height grids, card layouts with equal-height rows |
| Overlap | Allows columns to overlap each other | Layered layouts; use with explicit grid placement or z-index on the individual Column blocks |
Each Column block also has an Order setting, letting you reorder columns per breakpoint without touching the source order.
Styling
The Columns and each Column use the same shared design panel as every other block: spacing, type, colour, borders, effects, each per breakpoint. Style the Columns block to set the row-level background or border, and style each Column separately to control its own padding or background. The states panel is available on each Column if you want hover effects on individual cells.
Accessibility
Column order in the source should match the reading order that makes sense when the layout is linearised. Reordering columns visually using the Order setting on a Column block creates a gap between visual and source order, which is disorienting for keyboard and screen-reader users. Use Order sparingly, and check that tabbing through the page follows a logical sequence at every breakpoint.