Chapter 16
The editorial grid
A page looks elegant before it's beautiful, and almost always for one reason: every block rests on the same line. Five ways to build and break the grid with CSS — named lines, subgrid, full-bleed, container queries — without a single image file.
There’s a question that comes before all the others when you look at a page: what makes it elegant before it’s beautiful? Not the font, not the colour — those come later, and on their own they’re not enough. What the eye registers first, without knowing how to name it, is alignment: the fact that the margins line up, that the blocks begin on the same line, that nothing wobbles. A page with a single typeface and an honest grid always beats a page rich in fonts but built by eye. The grid is the silence on which, afterwards, beauty can speak.
The editorial grid is an inheritance from print: a cage that held text, images and captions together across pages without anything shifting by a millimetre. On the web we inherited the cage but not always the discipline, and two misaligned margins are enough to make a layout look improvised. The good news is that CSS Grid today already knows everything you need — named lines, subgrid, container queries — and almost always the work is just to name the right lines and let the blocks rest on them.
Five demos, one per gesture: build the grid, align the notes to it, break it with a quote, let it breathe at full width, and make it listen to its container instead of the window. And as always no libraries and — here it’s a precise promise — no image files: every “media” is a CSS gradient with a shape already of its own.
The twelve-column grid
The first gesture is building the cage. Twelve fluid columns are the editorial standard because they divide well — into 2, 3, 4, 6 — and because they give lines dense enough for any block to rest on without inventing measures.
Twelve fluid columns · named lines + overlay
The blocks don’t count the columns, they name them: the title runs from [col-1] to [col-9], the meta from [col-9] to [col-13]. That’s the difference between «from the fourth to the seventh» (fragile: add a column and it all jumps) and a line that has a name. The layout becomes a readable language, and when you reread it in six months you immediately understand what each thing rests on.
The overlay that reveals the columns is pure scaffolding: it’s for whoever designs, not whoever reads. That’s why it’s aria-hidden — diagnostic decoration — and the real blocks stay in the flow, legible even with the overlay off. A native switch turns it on (button role=“switch”): keyboard and announced state come for free. And on a narrow screen, where twelve tiny columns would be illegible, the blocks collapse to full width in reading order — the grid serves the reading, not the other way round.
The sidenote
With the cage built, two columns rest on it that must stay aligned row by row: the text and its notes. It’s the case where manual alignment always breaks, and it’s exactly what subgrid was made for.
The editorial grid comes from print: a cage that held text, images and captions together across pages without anything wobbling.
On the web we inherited the cage but not always the discipline: two misaligned margins are enough to make a page look improvised.
The sidenote gives the reader a second, optional layer of reading that never interrupts the main thread of the argument.
Sidenote · aligned with subgrid
The note must begin exactly at the height of the paragraph it comments on, not float at random. With subgrid the main column and the subsidiary one share the parent grid’s rows: each paragraph and its note rest on the same horizontal line, with no hand-calculated margins that break at the first change in text length. It’s the oldest pattern in publishing — the comment beside the text, never at the foot of the page — finally easy to do well.
The note is an <aside> and stays after its paragraph in DOM order, so a screen reader reads it at the right point in the argument: the two-column layout is purely visual. On a narrow container the columns collapse and the note slides under the paragraph, indented and with an accent rule — it stays recognisable as a note, not confused with the body. Colour isn’t the only signal: there’s the indent and the little number too. No animation: it’s a change of structure, not an effect to sell.
The quote that breaks the grid
A clear grid is also needed in order to break it well. The pull quote exists to break the rhythm — but a break is elegant only if the rule it violates is sharp.
For years I thought a page became elegant with the right font or the right colour. It’s a comfortable illusion, because it moves the problem onto a single, visible choice.
Alignment comes before beauty. A page with one font and an honest grid always beats a page rich in fonts but with no structure underneath. The grid is the silence on which beauty can then speak.
Pull quote · breaks out into the full-bleed column
The text lives in a narrow reading column; the pull quote breaks out into the wide column, from [full-start] to [full-end], spilling into the margins the body doesn’t touch. It doesn’t float at random: it occupies a precise line of the same grid, and that’s exactly why the offset reads as intention, not as a layout mistake. It’s the same cage as before, used at two different widths — and it’s that controlled contrast that gives the emphasis.
Here honesty is semantic. This pull quote is a visual duplicate of a sentence already present in the body, so it’s aria-hidden: we don’t want the screen reader to read it twice. It’s editorial decoration, not new content. If instead it quoted an external source it would be a real <blockquote> in the flow, with its attribution. The form — large, centred, accented — is the same in both cases; what changes is the truth it tells the screen reader.
The full-bleed figure
Full-bleed is the gesture of breathing: an image that touches both edges and gives the page air. But its value isn’t only in breaking out — it’s in coming back in right after.
The text flows in its reading column, narrow enough that the eye doesn’t get lost at the end of each line. Then a figure arrives.
And the text returns. The figure breathed at full width, the prose came back to its measure: the "out and in" rhythm is what makes a page feel composed, before it’s even beautiful.
Full-bleed figure · gradient, then the text returns
The figure rests on the [full] line and overrides the margins; right after, the text returns to its reading measure. That «out and then in» is the editorial rhythm that makes a page feel composed: the prose never stretches to full width, because a line that’s too long is tiring — the eye struggles to find the start of the next one. The figure widens, the text comes back in, and the page breathes without losing legibility.
No image file: the «media» is a CSS gradient with a fixed aspect-ratio, so the figure already has a shape and there’s no reflow when an asset arrives — it’s the honest placeholder, occupying exactly the space the real photo would. The block is a <figure> with a real <figcaption>, text in the flow; the gradient panel is decoration (aria-hidden). The caption returns to the reading width, aligned with the text: even when the image shouts, the words come back composed.
The card that listens to its container
The last demo overturns the opening question. For years we decided the layout by watching the window. But a component doesn’t live in the window: it lives in a slot, and the same component can be wide in one spot and narrow in another on the same page.
Container query · recomposes on the container's width
The media query asks «how wide is the page?». The container query overturns it and asks «how much room do I have?». The card recomposes based on the width of its container — from horizontal (media on the left, text on the right) to vertical (media on top, text below) — independently of the window. It’s the end of an era of components that guessed their space: now they measure it.
To demonstrate it without resizing the browser, a native <input type=“range”> narrows the container: keyboard, dragging and value come for free, and aria-valuetext states the value in words («wide»/«narrow»), not just as an abstract number — two channels, not one. The card inside knows nothing of the slider: it reacts only to the width left to it, and that’s exactly the point. The reflow is a change of structure, not an animation: the width transitions while you drag, but under prefers-reduced-motion it collapses to the final state without the slide.
Five gestures, one shared insight: a page’s elegance isn’t what you add, it’s the fact that everything rests on the same line. Building the twelve-column cage, aligning the notes to it with subgrid, breaking it with a quote that knows where it spills, letting it breathe at full width and then return, making it listen to the container instead of the window — each move is the same grid read a different way. And none of them needs a library or an image: just lines with a name, and the discipline to honour them. Beauty comes after. First comes alignment, which is the quietest form of respect for the reader.
The next chapter stays in editorial territory but tightens the focus onto a single element: the quote. The quotation — when you give the floor to someone else, how do you present it? Where does our text end and theirs begin, and how do you make that threshold visible without making it loud.