grid-and-spacing
Installation
SKILL.md
Grid & Spacing Systems
Spacing and grids are the load-bearing skeleton of a design system. Get them right and every component composes; get them wrong and you fight off-grid drift forever. This is the working reference: numbers, tokens, and CSS you paste.
The three grids (they coexist, they are not alternatives)
| Grid | Governs | Granularity | Tool |
|---|---|---|---|
| Soft grid (spacing) | Padding, margins, gaps between everything | 8pt (4pt half-step) | spacing tokens, gap, padding |
| Hard grid (columns) | Page-level horizontal structure: columns, gutters, margins | 12/8/4 columns | CSS Grid grid-template-columns |
| Baseline grid | Vertical rhythm of text across the page | 4pt (line-height multiples) | line-height, margin-block |
The soft grid is always on. The hard grid kicks in at the layout/page level. The baseline grid is the strictest and most often skipped — adopt it only when typographic precision matters (editorial, docs), because forcing every component onto a 4pt baseline is expensive.
The 8pt grid — why 8
- Divisibility. 8 divides cleanly by 2 and 4, giving you 4 / 8 / 16 / 24 / 32 without fractions. Halving stays whole (8→4→2).
- Density scaling. Screens render at @1x / @2x / @3x. An 8pt value is 8px @1x, 16px @2x, 24px @3x — always a whole pixel, never blurry half-pixels. Odd or 5-based values smear across densities.
- Less decision fatigue. A constrained scale means "what spacing here?" has ~8 answers, not 800.
- Cross-platform. iOS thinks in
pt, Android indp, web inpx/rem. 8 maps cleanly to all three (see Density below).