The 8-point grid, also written 8pt grid, is a spacing and sizing system in which the dimensions, padding, margins and positions of interface elements are set in multiples of 8, such as 8, 16, 24, 32 and 48. In layout & grids for digital design, it creates a consistent visual rhythm and reduces arbitrary decisions about spacing.
Unlike a column grid, which divides the page horizontally, the 8-point grid is a spatial unit applied in every direction. It is usually combined with a 4-point half step for small adjustments such as icon padding or line heights. The system works in density-independent units: points on iOS, dp on Android and CSS pixels on the web, so the same values scale cleanly across screen densities.
How the 8-point grid works
The rule is simple: every spacing and sizing value comes from a short scale based on 8. Designers do not choose 13 or 21 pixels of padding; they choose between 8, 16 and 24. This turns spacing into a limited set of tokens that designers and developers share.
The number 8 is popular for practical reasons. Common screen sizes and density multipliers, such as 1x, 1.5x, 2x, 3x and 4x, divide 8 into whole pixels, so elements stay crisp at every scale factor without half-pixel blurring. Eight is also large enough to make differences visible and small enough to offer useful steps.
The following table shows a typical spacing scale and the jobs each value usually performs.
| Value | Typical token name | Common use |
|---|---|---|
| 4 | space-xs (half step) | Icon-to-label gap, tight internal padding |
| 8 | space-sm | Padding inside chips, gaps in compact lists |
| 16 | space-md | Standard component padding, mobile screen margin |
| 24 | space-lg | Spacing between related groups, card padding |
| 32 | space-xl | Separation between sections inside a screen |
| 48-64 | space-2xl to space-3xl | Major section breaks, hero spacing |
Spacing, sizing and type on the grid
The 8-point grid governs component heights and spacing more strictly than typography. Buttons and inputs commonly take heights of 32, 40, 48 or 56, and icons sit in boxes of 16, 24 or 32. Touch targets of 48 by 48 fit the grid and meet common accessibility recommendations for minimum target size.
Text is handled differently because font sizes do not divide neatly by 8. Teams usually keep line heights on a 4-point baseline, for example 16-pixel text with a 24-pixel line height and 14-pixel text with a 20-pixel line height, so that text blocks align with the spacing system even when the font size itself is off-grid.
| Element | Grid rule | Example values |
|---|---|---|
| Container spacing | Multiples of 8 | 16, 24, 32 between groups |
| Component height | Multiples of 8 | Buttons at 40 or 48, list rows at 56 |
| Icon size | Multiples of 8 for the bounding box | 16, 24, 32 with internal padding |
| Line height | Multiples of 4 | 20, 24, 28, 32 |
| Borders | Excluded or absorbed by the box | 1-pixel stroke inside a 40-pixel button |
Borders raise a practical question. A common convention is to measure the box including its border, so a 1-pixel stroke does not push a 40-pixel button to 42. In CSS this matches the border-box sizing model.
The 8-point grid compared with other grid systems
The 8-point grid complements, rather than replaces, the other grid systems in layout design. Each answers a different structural question.
| System | What it controls | Relation to the 8-point grid |
|---|---|---|
| 8-point grid | Spacing and sizing unit | Reference |
| Column grid | Horizontal division into columns and gutters | Gutters and margins are often 16 or 24 |
| Baseline grid | Vertical rhythm of text lines | Usually a 4-point baseline nested in the 8 system |
| Modular grid | Columns plus rows forming modules | Module sizes can be set in multiples of 8 |
| 4-point grid | Finer spacing unit | Alternative or half step for dense interfaces |
| Responsive grid | Columns adapting at breakpoints | Spacing tokens may increase at larger breakpoints |
Some teams choose a pure 4-point system for data-dense products such as dashboards and professional tools, where 8-pixel steps feel too coarse. Others use 8 as the default and allow 4 only in explicitly defined cases, which keeps the scale disciplined.
Implementing the grid in design and code
The grid is valuable only when it is shared between design files and code. Defining it once as design tokens prevents the drift that occurs when designers specify values that developers then round differently.
- Set the nudge increment in the design tool to 8, so arrow-key movements stay on the grid.
- Use auto layout gaps and padding from the spacing scale rather than manual positioning.
- Publish spacing tokens to code, for example as CSS custom properties or a theme object.
- Express values in rem in CSS where appropriate, such as 0.5rem for 8 at a 16-pixel root size, so spacing respects user font settings.
- Review layouts with a grid overlay during design QA to catch off-grid values.
Limitations and common mistakes
The 8-point grid is a tool for consistency, not a law of perception. Applied rigidly, it can produce layouts that are mathematically correct but visually unbalanced.
| Problem | Cause | Fix |
|---|---|---|
| Text looks misaligned despite correct values | Font metrics add invisible space | Align to baseline or adjust optically |
| Too many spacing values in use | Every multiple of 8 allowed | Limit the scale to a curated set |
| Grid ignored in code | Values not shared as tokens | Publish tokens and lint for raw values |
| Dense screens feel cramped or loose | Step size too coarse | Allow defined 4-point half steps |
A plain-language summary
The 8-point grid is a house rule for spacing. Every gap, margin and size in an interface is a multiple of eight, such as 8, 16 or 24. It works like using standard brick sizes. Nobody cuts each brick differently.
Everyone on the team picks from the same few sizes. As a result, screens look tidy and consistent. Developers also build them faster, because nobody has to guess whether a gap should be 13 or 15 pixels.
An example from practice
A product team maintaining a booking app finds more than 30 different spacing values in its code, from 5 to 37 pixels, because each screen was built separately. Screens look subtly inconsistent, and every new feature restarts the same spacing discussions.
The team adopts an 8-point grid with a 4-point half step and a curated scale of 4, 8, 16, 24, 32, 48 and 64. Buttons are standardized at 48 pixels high, card padding at 16 and section spacing at 32. The values are published as spacing tokens, and a lint rule flags raw pixel values in stylesheets. Within two release cycles, the number of spacing values in use drops to seven, and design reviews spend far less time on alignment details.