Layout grid

A layout grid is an agreement, not a technology. Three numbers define it: how many columns, how wide the gutters between them are, and how much margin sits outside them. Everything placed on a screen then starts and ends on a column edge, which is what makes two pages drawn by two people on two different days look like they belong to the same product. The grid is invisible in the finished work. Its only evidence is that nothing is a few pixels off from anything else.

Twelve columns became the default because twelve divides cleanly by two, three, four and six, so halves, thirds and quarters all land on real column edges without inventing fractions. Other counts exist for good reasons. Carbon’s 2x Grid runs 4 columns on small screens, 8 on medium and 16 on large, and Material’s runs 4, 8 and 12, which is the other half of the agreement: the column count itself changes at breakpoints, and a component that spans 8 of 12 on a desktop spans 4 of 4 on a phone rather than shrinking to a quarter of the width.

The word overlaps with CSS Grid and the two are not the same thing. CSS Grid is a layout algorithm for arranging boxes in two dimensions, and you can implement a layout grid with it very neatly, using twelve 1fr tracks and a gap. But you can also implement a layout grid with flexbox, with floats, or with a spreadsheet and a lot of discipline, and you can use CSS Grid for a component that has nothing to do with the page grid at all. The layout grid is the specification; CSS Grid is one way to build to it.

In practice the grid lives as an overlay you can switch on, in Figma and in browser devtools, drawn as translucent columns over the design. Turning it on is the review step: a block that ends halfway through column seven is either a mistake or a deliberate exception, and the overlay is what makes the difference visible. The exceptions are worth allowing. Full bleed imagery ignores the margins on purpose, and so does a hero that runs edge to edge, and a grid that admits no exception tends to produce pages where nothing breathes.