Layout for developers

A grid is a set of shared edges agreed in advance. Before placing anything, decide how many columns there are, how far apart they sit, and how far the whole thing stays from the edge of the page. Those three numbers decide what every later placement can line up with.

A span is a reading decision. Wide blocks carry the eye across; narrow ones sit beside something else. On a stack of full-width blocks nothing leads, and the figure and its aside lose their relationship.

Alignment is counting edges. Each block that starts on a different column adds a vertical line the reader has to resolve. A centred title over left-aligned copy adds an axis on top of that.

Spacing carries structure. When every gap is a different arbitrary number, the reader cannot tell which things belong together. A short scale with a few roles does the work of a hundred individual decisions.

Measure is the number of characters on a line. It comes from two decisions at once: how wide the column is and how large the type is. A wide column of small type and a narrow column of large type can have the same measure.

A grid that works at 680px cannot survive 320px unchanged. Reflow is not shrinking; it is choosing a new grid for the new width while keeping the reading order and the decisions that made the wide layout work.

Transfer the decisions to a different section with new content and a tighter measure. The grid is yours to choose; the roles are the same.