Design Atlas
한국어
▦ Layout

8pt grid

8pt 그리드

A spacing rule where every margin, padding and size is a multiple of 8 (8, 16, 24, 32…) — so designers and developers agree on numbers instead of eyeballing them.

Also known as: 8px grid systemSpacing scale
···
html
<div class="stage">
  <div class="dots show" id="dots"></div>
  <div class="card">
    <div class="ic"></div>
    <i class="ln l1"></i><i class="ln l2"></i>
    <div class="btn"></div>
  </div>
</div>
css
.stage{position:relative;width:min(90%,320px);aspect-ratio:16/11;display:grid;place-items:center}
.dots{position:absolute;inset:0;border-radius:12px;opacity:.28;transition:opacity .5s;
  background-image:radial-gradient(circle,var(--line) 1px,transparent 1.4px);
  background-size:8% 8%}
.dots.show{opacity:1}
.card{position:relative;width:76%;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);padding:8%;display:grid;gap:8%;justify-items:start}
.ic{width:24%;aspect-ratio:1;border-radius:8px;background:var(--accent)}
.ln{display:block;height:8%;border-radius:3px;background:var(--line)}
.l1{width:80%}.l2{width:56%}
.btn{width:40%;height:14%;border-radius:8px;background:var(--accent-3);margin-top:2%}
js
const dots = document.getElementById('dots');
setInterval(() => dots.classList.toggle('show'), 1400);

Why 8: most screen densities, base font sizes and icon grids are multiples of 2 and 4, so basing everything on 8 still divides evenly (down to 4) and, across common pixel-density ratios (1x, 1.5x, 2x, 3x), multiples of 8 tend to land on whole device pixels instead of blurring.

In practice you predefine a spacing scale as CSS variables: --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px, and so on. Designers snap to an 8px grid in Figma; developers pick from that scale instead of writing an arbitrary padding: 13px.

It's a coordination tool, not a law of physics. The occasional 4px exception for an icon is fine — but if exceptions pile up, the grid stops meaning anything.

When to use

Use it when designers and developers share a team and need consistent spacing across many screens. On a small solo project, enforcing it strictly is usually overkill.