Which Spacing Values an 8-Point Grid Actually Allows
A designer reviewing a spec for 8-point-grid compliance finds a component with 13px padding and a 22px gap between elements.
Per the 8-point spacing grid convention, are these legal values?
The correct answer is "No — only multiples of 8, with 4 allowed for finer adjustments."
The 8-point spacing grid convention constrains every spacing and sizing value — padding, margins, gaps, even component heights — to multiples of 8px, with 4px allowed where 8px is too coarse (icon-to- label gaps, for instance). In practice that means only values like 4, 8, 16, 24, 32, 40, 48, 64 — never 13px or 22px. Both values in the spec are violations: 13px isn't a multiple of 4 or 8 at all, and 22px is close to but not actually 24px, the nearest legal value.
The distractors misstate the rule: there's no blanket "anything under 24px" allowance — the grid constrains by multiples, not by an upper bound; the grid explicitly governs spacing and sizing of individual elements, not just layout columns (that's a separate system, the layout grid); and the grid's base unit is 8 (with 4 for fine adjustment), not 10 — a "multiples of 10" reading would legalize 10px and 20px, neither of which is part of this convention.
Share this question