Five page shapes — blog, three-column docs, a card grid, narrow, and video with a sidebar — each one composed from the grid primitives rather than a layout invented per page.
Five page shapes a creator site actually needs, none of them a new primitive — every one below is .grid-rail, .grid-3, .split-phi or .container-narrow, sometimes nested, never reinvented.
Content and a rail. The rail collapses under the content rather than beside it, once the viewport can no longer afford both.
11 min read · CSS & layout
Every framework is a set of answers to questions someone else was asking. That is fine until your questions differ, and then every line you write is an argument with the defaults.
It started with a card. The framework had one, and it was nearly right — which is worse than being wrong, because nearly right gets overridden instead of replaced.
.grid-rail — content + an 18rem rail, one column under 68rem
A nav rail, the page, and a table of contents — this very page, in fact. Two primitives nested rather than a third one invented for the third column.
Nearly every layout in the system is one of three primitives: a stack, a cluster, or a named grid.
.grid-rail-left wrapping a .grid-rail — three columns from two primitives
Equal columns for things with no order between them — a track, a topic, a set of posts. Two-up at 62rem, one column at 40rem, no breakpoint classes written in the template.
.grid-3 — three equal columns, nothing per-card to configure
One column, held to a measure a reader's eye can track back from. No rail — a rail is a promise there is somewhere else worth looking.
The width a reader can track back to the start of the next line without losing their place.
A confirmation, a single setting, a sign-in form — anything whose job is one decision reads better without a second column arguing for attention.
.container-narrow — --w-narrow, no rail
The φ split, not a 2/3 one — the sidebar never competes with the thing that is actually playing.
.split-phi — 1.618fr / 1fr, collapses to one column at 62rem