A grid is arithmetic, not taste

What a grid actually is

A grid is a set of vertical lines that elements snap to, so that repeated decisions get made once. That is the whole idea. It is not a source of beauty, it is not a guarantee of anything, and a poster designed by one person in an afternoon does not need one.

What a grid buys is coordination. When four people are laying out forty pages, or when a component will appear in six different contexts, a shared set of positions means nobody has to negotiate each placement. That is why grids came out of newspaper and magazine production and why they matter more the more people are involved.

The arithmetic

Three quantities define a column grid:

• Margin — the space between the content area and the edge of the page or viewport.
• Column — the width of one unit.
• Gutter — the space between adjacent columns.

The relationship is exact:

content width = (n × column) + ((n − 1) × gutter)

Worked: a 1200px content area with 12 columns and 24px gutters gives

column = (1200 − 11 × 24) / 12 = (1200 − 264) / 12 = 78px

So an element spanning 4 columns is 4 × 78 + 3 × 24 = 384px. Not 400, not a third of 1200. If you place things by eye at round numbers, you are not on the grid, and the misses will be a few pixels — exactly the size that vernier acuity detects and nobody can name.

In CSS you never do this arithmetic yourself:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.feature { grid-column: span 4; }

The browser computes the column width, including the fractional pixels, and it stays correct when the container resizes. In a drawing tool, set guides once and save them with the document. Inkscape does this under Edit > XML or by dragging from the rulers; Scribus has a proper page-guide manager with a column and gutter dialogue built in.

Why twelve

Twelve divides by 2, 3, 4 and 6. That gives you halves, thirds, quarters and sixths from one grid, which covers nearly every layout anyone asks for. Sixteen is also common and gives halves, quarters and eighths but no thirds, which is why teams that adopt it end up hand-placing anything three-across.

On a phone, twelve columns is theatre. At 390px wide with a 16px margin each side, a twelve-column grid gives columns under 20px, narrower than a single character. Use four columns, or none at all — a single column with a 16px gutter on each side is a perfectly respectable grid and is what most phone layouts really are.

Margins are not decoration

The margin is the outer whitespace, and on screen it has a job beyond aesthetics: it keeps content away from the physical edge, where rounded corners, camera cut-outs, curved glass and the operating system's own gesture areas live. A 16px minimum side margin on a phone is the floor, and modern layouts add the safe-area inset on top of it:

padding-inline: max(16px, env(safe-area-inset-left));

In print the equivalent constraint is harder: anything within about 3mm of a trimmed edge may be cut off, because paper shifts in the guillotine. Covered properly in the block on physical output.

Beyond columns

Two extensions worth knowing:

• A modular grid adds horizontal divisions as well, producing cells rather than columns. Useful for catalogues, dashboards and anything with a repeating card.
• A compound grid overlays two column systems — say a 3 and a 4 — so that some elements align to thirds and others to quarters while both share the same outer margins. This gives variety without abandoning structure, and it is how most editorial layouts get their rhythm.

Both are tools for a specific problem. Reaching for them because a layout feels dull is usually a sign that the hierarchy, not the grid, is the issue.

The failure modes

Grid worship. Elements forced to span whole columns when the content wanted a different width. A photograph cropped to fit a grid it did not need to fit. The grid serves the content.

Partial adoption. Half the page on the grid and half placed by hand is worse than neither, because the eye picks up the near-alignments and reports them as errors.

A grid with no margin discipline. Twelve tidy columns and elements that wander into the outer margin at random. The outer edge is the most visible alignment on the page.

The honest summary: a grid removes a class of small errors and a class of arguments. It does not make anything good. Every dull layout on a twelve-column grid is evidence for that, and there are a great many of them.