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.
See it live: open this spacing scale in Scale Composer — the same three numbers that set the type scale generate the spacing steps and the 8px baseline.
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.