Grids You Can See

A grid is usually hidden scaffolding. Drawn on the page, it becomes the quietest ornament a layout can have.

2 min

Most grids are scaffolding: essential while the building goes up, removed before anyone moves in. This site leaves a few of its lines standing (the container's edges, the halves) as faint dotted rules behind everything.

The idea came from drawings rather than websites. An architect's plan keeps its construction lines; a type specimen shows the baseline and the x-height; an engineering sheet prints its border and title block on every page. The lines are not a mistake left in. They are how the drawing tells you it can be trusted.

FIG 01Two edges and a half: the lines every block on the page starts on.

Ornament that is also a rule

A visible guide is a promise. Once it is drawn, every block has to start on it, and the page cannot cheat. That is the point: the line costs nothing to draw and keeps every later decision honest.

Why hidden grids drift

Hidden grids drift. A card is nudged four pixels to make a heading fit, a column is widened for one long word, and a year later the layout is held together by exceptions nobody remembers making. A line on the page makes the drift visible the moment it happens: anything off the guide looks off, to everyone, immediately.

Fewer lines than you think

A twelve-column grid drawn in full is a fence, not a guide. The page only needs the lines its blocks actually start on, and on this site that is three: the two edges of the content and the half between them. Everything else is still there in the CSS; it just does not need to be seen.

  • Draw the edges, always.
  • Draw the half if blocks start on it.
  • Draw nothing a reader would have to count.
  • Keep the lines lighter than the faintest text.

The last rule matters most. A guide that competes with the content has become content, and the eye starts reading it. Dotted, at a few percent of the text colour, it sits just under the threshold of attention: visible if you look for it, invisible if you are reading.

A grid you can see is a grid you cannot quietly ignore.