4px and 8px grids: why an on-grid layout can still look off

A 4px grid means every gap is a multiple of 4: 4, 8, 12, 16, 24. An 8px grid uses a bigger step. Both remove stray values like 13px, but neither creates rhythm. A layout reads well when whitespace has at least three distinct tiers: within a group, between groups, and between sections.

I'm Hai Le, a product designer who builds design systems and codes this site myself. The examples below use the site's real spacing scale.

Why is the 8px/4px grid so common?

The source most people point to is Google's Material Design. The Metrics & keylines page of the original Material guidelines, still online at m1.material.io, says: "All components align to an 8dp square baseline grid for mobile, tablet, and desktop." The same page aligns toolbar icons and type to a 4dp grid. So 8 is the step for layout and components, and 4 is the step for detail.

The practical reason is multiplication. Screens have different pixel densities, and the OS scales your design by 1.5, 2 or 3. An 8-unit gap at 1.5x is a clean 12 pixels. A 5-unit gap at 1.5x is 7.5, which the browser has to round, so two edges that should match can end up a pixel apart. Multiples of 4 stay whole at all of those factors.

The second reason is decision speed. With roughly ten allowed values, designers and developers stop debating 14 versus 15. Tailwind is built on the same unit: in Tailwind v4 the --spacing variable defaults to 0.25rem, or 4px, so gap-2 is 8px and p-6 is 24px.

Should you use a 4px or an 8px grid?

I use 4px as the base and 8px as the main step. Here is this site's spacing scale, taken from its DESIGN.md:

The scale includes 12 and 20, which don't divide by 8. They exist because some spots are too tight at 8 and too loose at 16, card padding being the obvious one. Adding the 20px step meant renaming every token from xl up, and the migration mapping is written into the file so nobody uses an old name by mistake.

Why does an on-grid layout still look off?

The grid only guarantees that numbers divide by 4. It has no idea which gaps mean "same group" and which mean "boundary".

The mistake I see most: the gap between a heading and its lead equals the gap between two content blocks. Both are 24px, both are on-grid. People group things that sit close together, so when every gap is equal, the reader can't see where one group ends. The heading looks like it floats between two blocks.

How do you fix an on-grid layout that feels messy?

Here is a common section: heading, lead paragraph, then a row of cards. Every value divides by 4.

/* Before: on-grid, no hierarchy */
.section       { padding-block: 24px; }
.section h2    { margin-bottom: 24px; }
.section .lead { margin-bottom: 24px; }
.cards         { display: grid; gap: 24px; }
.card          { padding: 24px; }
.card h3       { margin-bottom: 24px; }

Six places share one value. A card's title sits as far from its description as one card sits from the next, and the section is only 24px away from whatever follows.

The fix splits whitespace into three tiers, named by role:

/* After: three tiers, each at least double the one below */
:root {
  --space-group: 8px;    /* within a group */
  --space-block: 32px;   /* between groups */
  --space-section: 80px; /* between sections */
}

.section       { padding-block: var(--space-section); }
.section h2    { margin-bottom: var(--space-group); }
.section .lead { margin-bottom: var(--space-block); }
.cards         { display: grid; gap: 16px; }
.card          { padding: 20px; }
.card h3       { margin-bottom: var(--space-group); }

@media (max-width: 767px) {
  :root { --space-section: 48px; }
}

Three changes do the work. The heading hugs its lead at 8px, so the two read as one unit. The lead sits 32px above the cards, four times that, so the jump to a new group is obvious. Sections are 80px apart on desktop and 48px on mobile, the same two values this site uses for every section.

My own rule: each tier is at least double the one below it. A smaller jump, like 16 to 24, usually isn't enough for the eye to see a new group. Notice that the card padding (20px) and card gap (16px) don't follow the three tiers. They belong to the component, and they stay fixed wherever the card appears.

In Tailwind, the "after" version comes down to a few classes:

<section class="py-12 md:py-20">
  <h2 class="mb-2">…</h2>
  <p class="mb-8">…</p>
  <div class="grid gap-4 md:grid-cols-3">…</div>
</section>

How do you put a spacing scale into a design system?

A spacing scale is a set of tokens, like colour and type. If the idea is new to you, read What is a design token first, then the naming questions in Design token FAQ.

In Figma, create a Number collection for spacing and bind it to auto layout gap and padding. Once the scale is a set of variables, nobody can type 13 by hand. The harder part is writing down what each step is for. "16px is the gap between cards in a 3-up row" helps a teammate, or an AI, pick the right value on a screen you never designed. I keep those rules in DESIGN.md, and What is DESIGN.md shows how.

Whitespace and type go together. Vietnamese headings need line height for stacked diacritics, which I cover in Choosing a UI font for Vietnamese.

At Joyme I built the design system for the product's first version in three months, which you can see in the Joyme case study. If your team needs someone to set up a token scale and keep it in sync between Figma and code, you can read more about me.

Sources

• Material Design (v1): Metrics & keylines: 8dp baseline grid for components, 4dp for toolbar icons and type. Accessed 2026-10-04.
• Tailwind CSS v4.3, theme.css in the tailwindcss package: --spacing: 0.25rem.
• DESIGN.md (Layout section) in this site's repo.