---
title: "8px grid"
description: "An 8px grid sets every size in an interface, from padding to button height, to a multiple of eight. What it is, where it bends, and why it helps."
canonical: "https://goodtogrid.com/glossary/eight-pixel-grid"
updated: "2026-10-02"
---

# 8px grid

> An 8px grid sets every size in an interface, from padding to button height, to a multiple of eight. What it is, where it bends, and why it helps.

URL: https://goodtogrid.com/glossary/eight-pixel-grid · Glossary · Updated: 2026-10-02

Every measurement on this site is a multiple of eight. It's a rule that makes hundreds of small decisions once, so a team can spend its attention on the ones that matter.

- **Term:** 8px grid
- **Backed by:** 1 case study · 1 for a client
- **Updated:** 2026-10-02

## What “8px grid” means

A spacing system in which every measurement in an interface (padding, gaps, component heights) is a multiple of eight pixels, or a clean half of one.

## In practice

Spacing comes in steps of 8, 16, 24, 32 and so on, with 4 for the tightest gaps. Nobody debates 13px against 14px. The answer is 8, 16 or 24.

Type and borders are where it bends: line heights stay on the grid while font sizes don't, and a 1px border belongs to the box it outlines, so a 40px button with a border is still 40px.

The payoff is at handover. When someone opens the files months later, the spacing already explains itself.

## Related work

- **[KYZN Preschool](https://goodtogrid.com/work/kyzn-preschool)** — Website for a preschool with campuses in Kuningan and BSD. _Client project · Education · Website · 2026_

## Frequently asked questions

### Why eight and not ten?

Eight divides cleanly into common screen widths and halves to four without landing on blurry half-pixels. Ten doesn't halve as cleanly.

### Do font sizes have to be multiples of eight?

No. Line heights follow the grid; font sizes follow the eye. A 15px body on a 24px line still sits on the grid.

## Read next

- [Design system](https://goodtogrid.com/glossary/design-system) (Glossary) — The shared rules and components a product is built from, so new screens match the old ones.
- [UI/UX design](https://goodtogrid.com/services/ui-ux-design) (Service) — Research, flows, prototypes and design systems, from the people who build them.
- [Web development](https://goodtogrid.com/services/web-development) (Service) — Marketing sites, web apps and dashboards, designed and built by the same team.
- [Designing on an 8px grid](https://goodtogrid.com/blog/eight-pixel-grid) (Note) — Why every size on this site is a multiple of eight, and what that one rule buys a client at handover.

[Start a project](https://goodtogrid.com/start-new-project#brief) · [All glossary](https://goodtogrid.com/glossary)