The 8-point grid is a spacing system for user interfaces in which all margins, paddings and component sizes are multiples of eight, with four as a half-step for type and icons. Popularised by Material Design's 8dp baseline grid and Bryn Jackson's guide, it keeps spacing consistent across screens.

8-Point Grid

Details
Full Name

8-Point Grid — a spacing system in which sizes, margins and paddings are multiples of eight, popularised around 2016 by Bryn Jackson’s guide on spec.fm and by Material Design’s 8dp grid

Also known as

8pt grid, 8dp grid, 8-point grid system

Core Concepts:

  • One base unit for all spacing. Margins, paddings, component heights and gaps are multiples of 8: 8, 16, 24, 32 and so on.

  • Fewer decisions, more consistency. A small set of allowed values ends the debate over 13 or 15 pixels and keeps screens built by different people aligned.

  • Material Design made it a platform rule. Material Design 1 states: "All components align to an 8dp square baseline grid for mobile, tablet, and desktop."

  • A 4-point half-step for fine detail. In Material Design 1, iconography and type align to a 4dp grid. Four is a common half-step for small gaps.

  • Soft grid and hard grid. A soft grid spaces elements by multiples of 8; a hard grid places every element on an 8-point lattice. Teams need to agree which one they mean.

  • A spacing system, not a column grid. The 8-point grid sets the rhythm of space. How many columns a layout has is a separate decision.

    Key Proponents

    Bryn Jackson (guide on spec.fm, called the most comprehensive guide in "Intro to The 8-Point Grid System", Pivotal, 14 December 2016); Google Material Design (Material Design 1, Metrics & keylines)

When to Use:

  • CSS for components, cards and lists, when spacing should come from one scale instead of ad-hoc pixel values

  • Defining spacing tokens in a design system

  • Handing designs to developers, so both sides use the same values

  • As a counter-instruction when generated CSS mixes values such as 13px, 18px and 22px

Common Misunderstandings:

  • Every value must be a multiple of 8. Material uses 4 for type and icons, and 4 is a common half-step.

  • Confusing the soft grid with the hard grid. One governs the spacing between elements, the other the position of every element on a lattice.

  • Mistaking it for a column grid. It says nothing about the number of columns.

  • Assuming the baseline ignores spacing scales. In our prior test on 2026-10-28, the baselines already leaned towards round numbers: 58 per cent of their pixel values in a responsive card list were multiples of eight. "Use an 8-point grid" raised the share to 88 per cent on every tier. Attribution was the weak point: Sonnet and Opus named no single creator and pointed to Material Design, Opus added Bryn Jackson, and Haiku named Samantha Warren with medium confidence.

Criticism:

  • Too coarse for dense interfaces. Darin Dimitroff explains in "Why we’re using a 4-point grid in Webflow" (Webflow Blog, updated 16 January 2019) why Webflow uses a 4-point grid: for a dense interface "an 8pt scale simply doesn’t provide enough granularity".