What Is the 8-Point Grid?
The 8-point grid is a spacing method where every size and space in an interface — margins, padding, gaps, component heights — is a multiple of 8 pixels. Instead of choosing each distance individually, you choose from a short menu: 8, 16, 24, 32, 40… It’s one of the most widely adopted spacing conventions in digital design, popularized by Google’s Material Design and now a default assumption in many design systems.
This article covers why 8 specifically, where the grid helps and where it turns into dogma, and how it generalizes into a proper spacing system.
Why exactly 8?
Three practical reasons:
- Divisibility. 8 halves cleanly twice (8 → 4 → 2), so nested layouts and centered elements keep landing on whole pixels.
- Screen density math. Devices render at 1×, 1.5×, 2×, 3× scale factors. Multiples of 8 stay whole numbers at every one of them (8 × 1.5 = 12), while odd values produce half-pixels and blurry edges at 1.5×.
- Coordination. When every designer and developer on a team picks from the same eight-or-so values, screens designed by different people in different quarters still look related. That — not pixel perfection — is the real payoff.
A 10-point grid would give you reason 3 and lose reasons 1 and 2. That’s essentially the whole argument for 8.
Is 8px sometimes too coarse?
Yes — inside components. Icon padding, the gap between a label and its input, space inside a chip or badge: at that scale the jump from 8 to 16 is far too big. The common answer is the 4-point half-step: 4px is allowed for fine-grained inner spacing, while 8-multiples handle layout-level spacing between components and sections. Typography often runs on 4s as well.
Many mature systems are therefore really “4pt grids where layout sticks to 8s” — a distinction worth being explicit about in your own documentation.
Does everything have to snap to the grid?
No, and this is where teams turn a useful convention into a harmful rule. Should snap: spacing between elements, padding inside containers, icon bounding boxes, fixed component heights. Should not snap:
- 1px borders and dividers — they’re drawn lines, not spaces.
- Optical corrections — a play-icon nudged 2px right to look centered is correct; the grid is not a reason to un-fix it.
- Text baselines mid-paragraph — line height handles those (see below).
The grid is a decision-reducer, not a law of physics. If a value needs to break it for a visible reason, break it and move on.
Is the 8pt grid the same as a baseline grid?
No — they answer different questions. The 8pt grid quantizes space (how far apart things sit); a baseline grid quantizes text rhythm (which invisible lines text sits on). They combine well when the baseline unit is derived from your typography: a common convention is half the body size. Body text at 16px gives an 8px baseline — and then your text rhythm and your spacing grid share the same 8px quantum.
From an 8-point grid to a real spacing scale
One thing often goes unexamined: multiples of 8 are not yet a system. 8, 16, 24, 32, 40, 48… is a linear menu with 20+ options — and linear steps are wrong at both ends. Small gaps need fine distinctions (8 vs 12 matters); large gaps don’t (72 vs 80 is barely visible). What you actually want is a short, non-linear set of steps: dense at the bottom, sparse at the top.
That’s what a modular spacing scale produces. Set a 16px base with ratio 2 and two notes per interval, and the scale generates 8, 11, 16, 23, 32, 45, 64… — 8-friendly at the bottom, accelerating at the top, every step derived from one formula instead of one meeting.
Try it below. The three numbers that set the type scale also generate the spacing steps and the 8px baseline — change the ratio and watch the spacing move with the headings. The baseline holds at 8px throughout, because it is derived from the base rather than typed in beside it.
The finite step set then maps directly onto spacing tokens (space-1 …
space-8, or xs–3xl) that survive the trip from design file to production CSS.
Try it against a real layout
Spacing decisions feel abstract until columns enter the picture: open the grid view with the same scale loaded and step the gutters and margins through the scale with your arrow keys — 4 columns on mobile, 8 on tablet, 12 on desktop. When a gutter moves from one scale step to the next, you can see what the 8-point grid was always trying to buy you: every distance on the page explained by the same small set of numbers.