Manuscript · one blockModular · rows meet columnsBaseline · rhythm for type
The column grid from the last article is the workhorse — but it is one member of a family of four. A novel needs no columns at all. A magazine spread needs rows as much as columns. A page of dense type needs a grid you cannot see even when you look for it: a beat.
The four families — manuscript, column, modular, baseline — are not competitors. They are answers to different questions, and most real pages run two of them at once. This article is about telling the questions apart.
01 · The four families
Different content, different bones
The manuscript grid is one block of content in one frame of margins — the grid of every book ever printed. The column grid adds verticals to span. The modular grid crosses those columns with rows, making cells that merge into fields. The baseline grid runs the other way entirely: a horizontal beat that every line of type sits on.
The selection rule is the whole lesson: the content picks the grid. Longform reading picks manuscript. Mixed-height layouts pick columns. Two-dimensional composition — tiles, spreads, galleries — picks modular. Dense multi-column type picks a baseline underneath whatever else is running.
The law
The content picks the grid; the grid never picks the content.
02 · See them on one page
Same page, four skeletons
Grids are easiest to tell apart when they are laid over the same content. Below is one small page — a heading, some text, an image, more text. Flip through the four families and watch what each one claims to organise: the frame, the verticals, the cells, or the beat.
Four grids, one page
The content never changes — only the skeleton laid over it.
03 · The modular grid
Cells merge into fields
Cross a 4-column grid with 3 rows and you get twelve modules. Nothing lives in a single module for long — the craft is merging them: a 2×2 feature field, a 4×1 header strip, a 1×3 pricing column. Merged fields keep a modular layout lively; unmerged, it reads as a waffle iron.
This is the grid of editorial design — and of every dashboard you have ever used. The same spread logic, the same merged fields; only the content updates itself.
Merge the modules
A 4×3 module grid. Each block prints its merge — columns × rows.
The law
Merge modules into fields; a grid of equal cells is a waffle, not a layout.
04 · The baseline grid
Type sits on a beat
The baseline grid is the spacing rhythm from Article 1, applied to type: every line height and every gap between text blocks is a multiple of one beat — commonly 4 or 8 points, here drawn at 14px so you can see it. Its payoff appears the moment a page runs two columns of text side by side: on the beat, their lines stay in step across the gutter; off it, they drift within a paragraph.
The web enforces this loosely rather than to the pixel — line heights drawn from the spacing scale — but the discipline is identical: the beat is decided once, not per paragraph.
Sit type on the beat
The amber lines are a 14px baseline. Toggle the type on and off the rhythm.
4
families — manuscript, column, modular, baseline
2
usually run together on one page
14px
the beat drawn in the lab above
05 · Running them together
The compound grid
Real pages rarely run one family alone. The standard compound is column + baseline: verticals for structure, a beat under the type — they organise different axes, so they never fight. A modular hero above a column body is another everyday pair.
The one combination to refuse is two grids answering the same question — two different column systems on one screen is not a compound, it is a collision. Families combine because each claims its own axis; systems never multiply on the same one.
Column + baseline, the everyday compound: two columns of type, one beat — the lines agree across the gutter.
The law
Families combine on different axes; systems never multiply on the same one.
Seen in the wild
Two pages, two families
A book page and a magazine spread — both perfectly gridded, on entirely different bones.
Manuscript
The book page
One block, one measure, generous margins. Nothing to span, nothing to merge — the frame and the rhythm are the whole design.
Modular
The magazine spread
A 2×2 feature field, an opener, sidebars, a footer strip — modules merged into a composition. The same bones as every dashboard.
Where the families meet the real world
Manuscript, column, modular, baseline — chosen by content, combined across axes. One force remains that none of them controls: the viewport. Next in the series: what happens to a grid when the screen itself changes size — breakpoints, fluidity, and the counts that bend while the tokens hold.
The real references
Where the field agrees
Four sources worth reading in full — the systems and research this article stands on.
The waffle-iron modular gridEvery cell the same size, nothing merged — the grid is technically present and compositionally dead.FixMerge modules into fields. The 2×2 feature and the 4×1 strip are what make a modular page read as designed.
Carousels as a storage closetA carousel deployed because content did not fit — hiding structure, shifting controls, changing heights per slide.FixUse a carousel only when sequence genuinely matters. Keep controls fixed, expose position, hold one aspect ratio.
Images divorced from their captionsGrid rows built on equal heights push an image visually closer to the next article than to its own title.FixBind image + title + caption as one unit on the grid; relationships outrank tidy row heights.
Thumbnail grids designed with perfect contentIdeal mock images and six-word titles — then real portrait photos, long titles and missing media shred the rows.FixPick one model deliberately (fixed-ratio crop / masonry / fixed-height card) and stress-test with worst-case content before shipping.
The vocabulary
The Varieties glossary
Six words for choosing bones. 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.