The last two articles built the discipline half of layout: one unit for every distance, one rail for every edge. Both work beautifully — until the page needs three cards abreast, a sidebar, a gallery. One rail cannot say where the second column stands.
The grid answers that. It multiplies the rail into columns, fixes the channels between them, and frames the whole in margins. From then on nothing on the page invents its own width — everything spans columns, and screens built by strangers still agree.
01 · Why a grid
Rails, multiplied
Remember what one shared edge bought: every eye-landing predictable, order verified at a glance. A grid buys the same thing sideways. Columns are rails standing in formation; content that hangs from them inherits alignment in both directions at once.
The deeper win is the one from the spacing article, scaled up: accidental agreement. Two teams, two screens, zero coordination — but both compose on the same 12 columns, so a card built for one screen drops into the other and fits. A grid is a treaty about where things stand.
And like the spacing scale, the grid is three numbers, not a diagram to memorise: how many columns, how wide the gutters, how deep the margins. Everything else is spans.
One rail orders a column. Multiplied, it gives pairs and trios somewhere to stand.
The law
A grid is alignment, industrialised.
02 · The anatomy
Columns, gutters, margins
Columns are where content stands. Gutters are the fixed channels between them — and they are nothing new: a gutter is a spacing token at grid size, usually 16 or 24. Margins frame the whole grid, keeping the composition off the viewport’s edge.
Desktop’s classic count is 12, for one arithmetic reason: it divides by 2, 3, 4 and 6, so a split-screen, a trio and a sidebar all sit on the same scaffold. Phones drop to 4; tablets ride 6 or 8. The counts change; the gutter and margin tokens stay.
Build one below — and read the CSS it costs. Three numbers.
Anatomy of a grid
Pick columns, gutter and margin. Amber bands are columns; the dashes mark the margin edges.
Columns
Gutter (spacing token)
Margin
← margincolumns & guttersmargin →
03 · Composing on it
Widths come from spans
Once the grid stands, no element ever gets a width of its own again. A hero spans 12. A card spans 4. A sidebar spans 4 beside content spanning 8. The question “how wide should this be?” — the one that used to produce 61% and 47% and a different answer every screen — collapses into “how many columns does it span?”
That substitution is the entire practical craft of grids. It is also why handoffs stop hurting: “make it span 8” is an instruction any teammate, or any stylesheet, executes identically.
Compose a few real pages below — four layouts, one grid, zero invented widths.
Compose with spans
Four page recipes on the same 12 columns. Every block states its span; none states a width.
The law
Widths come from the grid, never from whim.
04 · One system, three articles
The grid inherits the rhythm
Look again at the three numbers: gutters and margins are spacing tokens; column edges are rails. The grid invents nothing — it is the spacing system and the shared edge, assembled into a structure. Change the base token and the whole scaffold re-spaces in step.
This is why the order of these articles matters. A grid drawn before the unit and the edges exist is decoration — numbers with no system underneath. Built on top of them, it is the point where layout stops being decisions and starts being architecture.
Feel the difference the scaffold makes — the same page, on and off the grid.
On the grid · freeform
Same content. On the grid every width is a span; freeform, every width is a guess. The columns stay visible underneath — watch what agrees with them.
12
columns — divides by 2, 3, 4, 6
1
gutter token, from the spacing scale
0
widths invented by hand
05 · Breaking it on purpose
Full-bleed
The grid’s exception has a name: full-bleed — the element that runs past the columns to the frame’s edge. A hero photograph, a section-change band, the amber quote you scrolled past earlier: each earns its size because everything around it holds the columns.
The same three words police it: deliberate, rare, documented. A page of full-bleeds has no grid left to bleed past — the exception only speaks against the rule. Break the scaffold the way you broke the rail: as an act of emphasis, on record, never by drift.
One band past the columns, everything else on them — the bleed reads as a moment, not a mistake.
The law
Full-bleed speaks exactly as loudly as the grid around it holds.
Seen in the wild
Same page, two structures
A landing page’s card row — once composed on 12 columns, once with each card sized by eye.
On the grid
12 · 4+4+4 · 8+4
Every width is a span, every gap the same gutter. The rows agree with each other because they agree with the columns.
By eye
31% · 36% · 26% — guessed
Three cards, three private widths, two different gaps. Each row is plausible alone; together they never quite agree, and none of it transfers to the next screen.
The system, complete — and what’s next
Spacing gave layout its unit. Alignment gave it edges. The grid assembles both into architecture — columns for structure, gutters from the scale, margins for the frame. Next in the series: the grid’s varieties — column, modular and baseline grids, and when each one earns its keep.
The real references
Where the field agrees
Four sources worth reading in full — the systems and research this article stands on.
The grid lives in Figma onlyThe developer receives component measurements but never the page-level grid contract — columns, gutters, margins, breakout rules. Production drifts immediately.FixHand off the grid as a contract: counts, gutters, margins, max-widths, nested-grid and full-bleed rules, per breakpoint.
Everything becomes an identical cardCard components are easy to reuse, so every idea ships in the same rounded box — and the page becomes a wall with no foreground.FixKeep at least four treatments in play: open section, contained panel, highlighted feature, quiet supporting row.
Nested containers stack their chromeA table inside a card inside a panel inherits three layers of padding and borders, until the data gets the smallest share of its own space.FixSet a containment budget: once nested, inner layers surrender padding, borders and duplicate headers.
Breakouts that never come homeA section escapes the grid for effect — then the next section inherits its ad-hoc width, and the rulers are gone.FixBreakouts are welcome and must return: the section after a full-bleed re-enters the shared rulers exactly.
The vocabulary
The Grid glossary
Six words for composing on a scaffold. Tap a card to flip it.
The nuance
Questions you actually ask
Train the eye
Run the numbers
Ten questions in mixed formats — multiple choice, multi-correct, fill-in, match, order, read-think-connect and write-your-own — each with layered hints: a nudge, the reasoning, then a deeper connection. Served from the question bank, never hardcoded.