Columns
Lay content out in a row of side-by-side columns, each a box section, with preset or custom widths.
What it is
A columns block arranges content in a row of side-by-side columns. Each column is a box section, so it carries the section options — background, spacing, border — while the columns block owns the layout: how many columns and how wide each one is.
How to add it
Add a Columns block and pick a layout — two equal columns, one-third / two-thirds, three or four across. Each column starts as a box section you fill with blocks. Columns stack to full width on mobile.
Configure it
Choose a column layout for the row (the widths). Each column is a plain container that holds whatever you like — drop content straight in, or add a section if you want a coloured band. Below: a two-thirds / one-third split with sections, and three plain equal columns.
Turn on "Space between columns" to put a gap between them. The gap takes its width from the grid, so the columns narrow to make room and the row still lines up with everything else on the page — there is no gap size to choose. It is offered only where it divides the grid into whole columns: not on four columns, which already fill the row, and not on three equal ones, which would leave each column too narrow to read.
Tips
Keep columns to a single idea each and the counts small (two to four). You can put a columns block inside a section band, but not inside another columns block — nest layout no deeper than one level.
Related pages
See also: Sections (each column is a box section — the section options style the cell) and Cards, which sit naturally in columns.
Example
Main column
Two-thirds of the row — the primary content.
Aside
One-third — a sidebar or callout.
One of three — a plain column, no section needed.
Two of three — just the content you drop in.
Three of three — add a section inside a column only if you want a band.
A single full-width column — the simplest grid.
One of two — even split.
Two of two.
One of four.
Two of four.
Three of four.
Four of four.
At a glance
A narrow supporting section beside the main column.
An image sits in the wide column, with a caption below it.
A narrow text column on the left.
The wide middle column — here an image with a note under it.
Aside
A narrow section on the right.
A side rail.
The main column, with a one-column gap on each side — the arrangement the design system uses for its own page skeleton.
A second rail.
A wide column with space beside it — the design system's own offset example: six columns wide, a three-column gap, then three.
The narrow column, pushed right by the gap.