Gutter

Space is the part of a screen with nothing in it, which is why it doesn't look like a decision. That makes it the first value to drift as screens accumulate.

Pagedeck's dashboard ended up that way. Some rows had 16 between cards and others had 24, and what looked wrong wasn't that the values differed. In the rows opened to 24, three cards read as unrelated; in the rows closed to 16, the same three read as one group. The content was of the same kind and the grouping looked different. The person who drew the mockup couldn't explain what felt off either; with no name for the space, there's no way to talk about it.

A gutter puts a name and a value on that empty slot. Under layout, the rules for arranging elements on a screen, it sits in the structure branch, and it's one of the three values a grid system settles.

It divides one column from the next, which in practice means one element from the element beside it. Three things get considered.

1. Grouping. People read things placed close together as one unit. Put 24 between cards and 8 between the elements inside a card and each card reads as a unit. Flip that relationship — 24 inside and 8 between cards — and the heading of the next card reads as though it belongs with the body text of this one. The gap between inside and outside matters before the size of either does.
2. Screen size. A gutter of 24 that works on a wide screen leaves no width for content on a phone. Twelve columns with a gutter of 24 means eleven gaps, so 264 goes to spacing alone. Narrow screens drop it to 16 or 8.
3. Keeping it distinct from the outer margin. A gutter divides the inside of the screen while the side margin wraps the content as a whole, so they do different jobs. Give them the same value and the distance from the leftmost card to the screen edge matches the distance between cards, which blurs where a row starts and ends.

The value itself comes from a spacing scale. Pick one entry from a fixed table like 4, 8, 16, 24, 32; something off the table like 20 or 22 puts that one screen on its own set of marks.

"The gutter between cards changes from row to row. Let's set all of them to 24."

Elements of the same kind are grouping differently depending on the row.

"I'll drop the gutter to 16 on mobile. At 24 there's too little room inside the cards."

Saying the value will differ by screen size.

"The inner padding is larger than the gutter, so the cards don't read as units."

The problem is the inverted relationship rather than either number.

At Pagedeck, Noa writes the gutter down as 24 on wide screens and 16 on narrow ones and uses only those two. When a third value seems necessary, the card size is usually wrong, so that's what gets looked at first.