What Is the 8px Grid Spacing System in Web Design?
If you have ever struggled to make a web layout feel “right,” chances are the spacing was off. Inconsistent margins, awkward padding, and elements that just don’t line up can turn a promising design into a messy one. That is exactly the problem the 8px grid spacing system solves.
The core idea is simple: use multiples of 8 (8, 16, 24, 32, 40, 48, 56, 64, and so on) to define every spacing value in your design. This applies to margins, padding, widths, heights, line heights, and even icon sizes. By constraining your choices to a predictable scale, you create layouts that feel balanced, consistent, and professional without second-guessing every pixel.
In this guide, we will walk through exactly how the system works, why designers rely on it, and how you can apply it to your next web project with practical, real-world examples.
Why 8px? The Logic Behind the Number
You might wonder why 8 and not 5 or 10. There are several good reasons:
- Screen friendliness: Most popular screen resolutions (1920, 1440, 1366, 1280, 1024, 768, 360) are divisible by 8. This means elements sized in multiples of 8 align cleanly on nearly every device.
- Scalability: 8 divides evenly by 2 and 4, giving you a graceful way to scale down (to 4px or 2px) when you need tighter spacing, like inside small components.
- Rhythm and harmony: Repeating proportional spacing values creates a visual rhythm that the human eye perceives as orderly and pleasant.
- Simplified decision-making: Instead of choosing from hundreds of possible pixel values, you select from a short, predictable list. This speeds up both design and development.
Material Design by Google, IBM Carbon, and many other major design systems are built on the 8px grid (sometimes called the 8pt grid). It is one of the most widely adopted spacing conventions in modern UI and web design.
The 8px Spacing Scale at a Glance
Here is the standard spacing scale you will use when working with an 8px grid system:
| Token Name | Value | Common Use |
|---|---|---|
| space-1 | 8px | Tight inner padding, gaps between inline elements |
| space-2 | 16px | Default padding inside cards and buttons |
| space-3 | 24px | Spacing between related content blocks |
| space-4 | 32px | Section padding, form field gaps |
| space-5 | 40px | Larger component margins |
| space-6 | 48px | Standard icon container size, nav bar height |
| space-7 | 56px | App bar height (mobile) |
| space-8 | 64px | Desktop header height, hero section padding |
| space-10 | 80px | Section vertical spacing |
| space-12 | 96px | Large section dividers |
| space-16 | 128px | Hero section top/bottom padding |
You are not limited to these exact names. What matters is that every value is a multiple of 8.
How to Apply the 8px Grid to Margins and Padding
This is where the system proves its value in everyday web design. Let’s walk through specific, practical examples.
Example 1: Card Component
A standard content card might use the following spacing:
- Inner padding: 16px on all sides (space-2)
- Gap between image and title: 8px (space-1)
- Gap between title and description: 8px (space-1)
- Gap between description and button: 16px (space-2)
- Margin between cards in a grid: 24px (space-3)
Notice how every single value comes from the 8px scale. Nothing is arbitrary. If you later need to adjust the card to feel “roomier,” you simply bump each value up by one step, for example from 16px to 24px for the inner padding.
Example 2: Page-Level Margins
For a standard content page layout:
- Top margin below the navigation: 32px or 48px
- Side padding (desktop): 64px or 80px
- Side padding (mobile): 16px or 24px
- Space between major sections: 64px, 80px, or 96px
- Space between paragraphs: 16px or 24px
Example 3: Form Design
| Element | Property | 8px Grid Value |
|---|---|---|
| Input field height | height | 40px or 48px |
| Input inner padding | padding-left / padding-right | 16px |
| Label to input gap | margin-bottom | 8px |
| Between form fields | margin-bottom | 24px |
| Submit button height | height | 48px |
| Submit button padding | padding-left / padding-right | 32px |
Every measurement snaps to the grid. This removes the guesswork and ensures your forms look aligned and structured across all screen sizes.
Applying the 8px Grid to Component Sizing
The spacing system does not stop at whitespace. You should also use it to define the actual dimensions of UI components. Here is how:
Icons
Standard icon sizes on the 8px grid:
- 16 x 16px (small inline icons)
- 24 x 24px (default UI icons)
- 32 x 32px (medium emphasis)
- 48 x 48px (touch targets, feature icons)
Buttons
- Small button: height 32px, horizontal padding 16px
- Default button: height 40px, horizontal padding 24px
- Large button: height 48px, horizontal padding 32px
Avatars and Thumbnails
- 24px, 32px, 40px, 48px, 56px, 64px, 80px, 96px, 128px
By picking from these predefined sizes, every avatar in your interface will feel like it belongs to the same system.
What About 4px? When to Break Down the Grid
Strict 8px increments work well for most layout decisions, but sometimes you need finer control. This is where the 4px sub-grid (sometimes called a “half-step”) comes in.
Use 4px for:
- Small internal gaps within tight components (e.g., the space between an icon and its label inside a button)
- Border radius values
- Optical adjustments on text alignment
Some teams also allow 2px for strokes and very fine details. The important rule is: 4px and 2px are exceptions for small, inner component details. The primary layout grid stays at 8px.
Setting Up the 8px Grid in Figma
Since Figma is the dominant design tool in 2026, here is a quick walkthrough for setting up your 8px grid:
- Select your frame (e.g., a 1440px desktop frame).
- In the right panel, click the + next to “Layout grid.”
- Click the grid icon to open settings. Choose Grid type, set the size to 8px, and pick a visible but unobtrusive color.
- Add a second layout grid using Columns (e.g., 12 columns with 24px gutters and 64px margins) to combine your spatial grid with a column grid.
- Use Figma’s nudge settings: go to Preferences and set the “Big nudge” to 8px. Now every Shift + Arrow press moves elements exactly one grid unit.
- Define your spacing scale as local variables (space/100 = 8, space/200 = 16, etc.) so every team member references the same tokens.
With this setup, snapping to the grid becomes nearly automatic.
The 8px Grid in CSS: Implementation for Developers
Designers hand off the spacing scale; developers implement it. Here is a clean way to do that in CSS:
:root {
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 40px;
--space-6: 48px;
--space-7: 56px;
--space-8: 64px;
--space-10: 80px;
--space-12: 96px;
--space-16: 128px;
}
.card {
padding: var(--space-2);
margin-bottom: var(--space-3);
}
.card__title {
margin-bottom: var(--space-1);
}
.section {
padding-top: var(--space-10);
padding-bottom: var(--space-10);
}
Using CSS custom properties means your entire codebase references one source of truth. If the design team ever adjusts the scale, you change the variables in one place and the whole site updates.
If you use Tailwind CSS, you can customize the spacing scale in your tailwind.config.js to match the 8px grid:
module.exports = {
theme: {
spacing: {
'1': '8px',
'2': '16px',
'3': '24px',
'4': '32px',
'5': '40px',
'6': '48px',
'7': '56px',
'8': '64px',
'10': '80px',
'12': '96px',
'16': '128px',
}
}
}
Real-World Layout Walkthrough: Blog Page
Let’s put it all together by spacing a typical blog page layout entirely on the 8px grid.
| Area | Spacing Property | Value |
|---|---|---|
| Navigation bar height | height | 64px |
| Nav inner padding | padding-left / right | 32px |
| Space below nav | margin-bottom | 48px |
| Hero title bottom margin | margin-bottom | 16px |
| Hero subtitle bottom margin | margin-bottom | 32px |
| Blog content max-width | max-width | 720px (90 x 8) |
| Paragraph spacing | margin-bottom | 24px |
| Image margin (top and bottom) | margin | 32px |
| Sidebar gap (desktop) | gap | 48px |
| Footer top padding | padding-top | 64px |
| Footer bottom padding | padding-bottom | 64px |
Every value is a multiple of 8. The layout will feel cohesive even before you add typography, color, or imagery.
Common Mistakes to Avoid
The 8px grid is straightforward, but there are a few pitfalls that trip designers and developers up:
- Using the grid for font sizes. Font sizes don’t need to follow the 8px grid. A 14px body font or an 18px heading is perfectly fine. The grid is for spacing and sizing, not for type scale (which should follow its own scale, typically based on a modular ratio).
- Being too rigid. If 8px feels too big for a gap and 0px is too small, use 4px. The sub-grid exists for a reason. Consistency matters more than dogma.
- Ignoring line height. Your line heights should also respect the grid. For example, a 16px font with a 24px line height keeps text baselines aligned to the grid.
- Mixing systems. If part of your team uses an 8px grid and another part uses a 5px or 10px grid, you lose all the consistency benefits. Align on one system across the entire project.
- Not documenting the scale. Write your spacing scale down and make it accessible. Whether it lives in Figma variables, a design tokens file, or a CSS variables sheet, everyone must reference the same scale.
Benefits You Will Notice Immediately
Once you commit to the 8px grid spacing system, here is what changes:
- Faster design decisions. You stop debating whether something should be 13px or 15px. The answer is 16px.
- Cleaner developer handoff. Developers can predict spacing values instead of inspecting every element pixel by pixel.
- Better responsiveness. Since 8 divides cleanly, scaling components up or down for different breakpoints is much simpler.
- Visual consistency across pages. Every page on your site shares the same underlying rhythm, creating a cohesive user experience.
- Easier maintenance. When spacing is systematic, updating it later is a matter of changing a few variables, not hunting through hundreds of arbitrary values.
Frequently Asked Questions
Is the 8px grid system the same as a column grid?
No. A column grid defines horizontal divisions of a page (like 12 columns with gutters). The 8px grid is a spatial system that controls the spacing between and within elements. In practice, most designers use both: a column grid for overall layout structure and the 8px grid for all spacing values.
Should I use 8px or 8pt?
In web design, you work in pixels, so 8px is the correct unit. In mobile app design (especially Android), you might see 8dp (density-independent pixels). The concept is identical. “8pt grid” is often used as a general term that covers all these units.
Can I use rem instead of px?
Absolutely. If your root font size is 16px (the browser default), then 0.5rem = 8px, 1rem = 16px, 1.5rem = 24px, and so on. Using rem is actually better for accessibility since it respects user font-size preferences.
What if my design tool does not support an 8px grid?
Most modern tools, including Figma, Sketch, and Adobe XD, allow you to set a custom grid size. If your tool doesn’t, you can still work with the system manually by using only multiples of 8 for all spacing values.
Does the 8px grid work for mobile design?
Yes. In fact, it works especially well for mobile. Common mobile screen widths like 360px, 375px, and 390px accommodate 8px-based layouts cleanly. Touch targets recommended by Google (at least 48px) are already on the 8px grid.
Is a 4px grid better than an 8px grid?
A 4px grid gives you more granularity, which can be useful for dense, data-heavy interfaces. However, for most websites, 8px as the primary unit with 4px as a sub-grid offers the best balance between flexibility and consistency. Starting with 8px and dropping to 4px only when needed is the approach most teams recommend.