Grid System

Deciding element positions screen by screen makes the values drift. It's done by eye, so a card ends up 396 wide on one screen and 412 on another inside the same product, with no basis for saying which is correct.

Pagedeck's settings screens were like that. Some had 28 of side margin and others had 30. Put them next to each other and the mismatch is obvious; look at either one alone and nobody noticed. Engineering had nobody to ask either, so each person measured off the mockup, and the values scattered one more time in the process.

A grid system settles the ruler and its marks before anything gets placed. With a frame in hand the question changes: not where to put this and how wide, but how many columns it takes. Under layout, the rules for arranging elements on a screen, it belongs to the structure branch.

Three values get decided.

1. The column count. Twelve is the most common on the web, because twelve divides evenly by 2, 3, 4 and 6, so a two-part composition and a three-part composition both sit on the same frame. Set it to ten and a three-part composition leaves one column stranded. Each individual vertical division is a column.
2. The space between columns, called the gutter, typically set to something like 24. Too narrow and content brushes against the next column; too wide and things that should read as one group look scattered.
3. The margin down each side of the screen. It does a different job from the gutter, which divides the inside, so the two often carry different values.

Once those three are fixed, element widths get written in columns rather than pixels. Note a card as four columns and those four columns widen together as the screen widens, so nothing needs recalculating. Three four-column cards fill one row, and an eight-column body beside a four-column sidebar comes out of the same frame.

Narrow screens use fewer columns — four or six is normal on a phone — and the width at which that switch happens is set by a breakpoint. To pin vertical spacing down as well, pair the grid with a spacing scale. The grid handles horizontal, the scale handles top to bottom.

"How many columns is this? Please rewrite it against the twelve-column grid."

The width arrived in pixels and needs to come back in columns.

"Five cards don't fit twelve columns. Let's go with four or six."

Filtering out a count the frame can't hold, before it's built.

"There's an element sitting outside the grid — is that deliberate?"

Asking whether a departure from the frame is a mistake or a decision.

At Pagedeck, Noa hands over mockups with the grid switched on. What Theo receives isn't 396, it's four columns, so nothing has to be asked about what stretches when the screen gets wider.