The Designer's Grid Bible — 12-column, baseline & 8pt grids explained

Contents

1. Why grids exist (and why three of them)
2. The 12-column grid in 5 minutes
3. The baseline grid in 5 minutes
4. The 8pt spacing grid in 5 minutes
5. How the three systems cooperate
6. Setting up the three grids in Figma
7. Implementing the three grids in CSS
8. Encoding the grids in a design system
9. When to break the grid
10. The one-page cheat sheet

TL;DR — the three grids in one sentence each

The 12-column grid handles horizontal placement of content blocks across the page. The baseline grid handles vertical rhythm of text lines so consecutive lines sit at predictable positions. The 8 px spacing scale handles every other spacing decision (margins, padding, component sizes, gaps between elements) by enforcing a small set of canonical values rather than letting each spacing be set independently. The three systems cooperate: 12-column sets the major layout regions, 8 px scales their internal spacing, baseline manages the text inside text-heavy regions.

0a. Why three grids and not one

The temptation is to look for "the one grid system" and apply it everywhere. The reason this fails is that horizontal placement, vertical text rhythm, and general spacing are different problems that respond best to different grid resolutions. The 12-column grid at typical 1200 px container with 24 px gutters resolves to ~76 px per column, which is the wrong scale for vertical text rhythm (which needs ~24 px per baseline) or for general spacing (which needs an 8 px multiple). Forcing everything to one grid resolution either produces a too-coarse text rhythm or a too-fine layout grid. Three coordinated grids at appropriate resolutions each handle their layer cleanly.

The three grids must coordinate with each other. The 12-column grid's gutter (24 px standard) is a multiple of the 8 px scale. The baseline grid (24 px standard) is also a multiple of 8 px and a fraction of typical column widths. The component-level sizes (32, 40, 48 px buttons; 16, 24, 32 px icons) all derive from the 8 px scale and fit within typical baseline divisions. When the three grids' values are chosen to be mutually compatible, the design system as a whole feels integrated; when they are chosen independently, the design system feels approximately right but never precisely so.

0. Where these grids come from — the Swiss school and its successors

The grid systems in contemporary web design trace back to a specific design movement: the Swiss International Typographic Style of the 1940s-60s, codified in print by Josef Müller-Brockmann, Karl Gerstner, Emil Ruder, and Armin Hofmann. The movement's central claim was that strict grid structure, sans-serif typography, and rigorous information hierarchy produced more honest and more usable design than the decorative traditions it succeeded. Grid Systems in Graphic Design (Müller-Brockmann, 1961) is the foundational text and remains in print as a working reference.

The Swiss-school grid was adapted for screen-based design across three waves. The first wave (1995-2000) attempted to reproduce print grids in HTML tables — clumsy, inflexible, and dependent on fixed canvas dimensions that the browser did not provide. The second wave (2005-2012) saw the 960 Grid System and Blueprint CSS introduce float-based 12-column grids that worked across the multi-resolution canvas of pre-responsive web design. The third wave (2012-present) added responsive behaviour: media-query breakpoints, fluid columns, and flexible gutters. Bootstrap, Foundation, and the Material Design grid all sit in this third wave.

The contemporary grid systems covered in this guide — 12-column layout, baseline typography rhythm, 8 px spacing scale — are the synthesis of all three waves. They preserve the Swiss school's structural rigor, add the responsive flexibility the medium requires, and codify component-level standardisation that print never needed because every print piece was a one-off. Understanding the lineage helps explain why the contemporary systems look the way they do and why their conventions are widely shared rather than each design team inventing its own.

1. Why grids exist (and why three of them)

A grid is a deliberate constraint on placement and spacing decisions. Instead of choosing each margin, gutter, and component size independently — which produces visually almost-aligned designs where the small misalignments accumulate into perceived sloppiness — a grid restricts the available choices to a small canonical set, and consistency follows automatically. The benefit is not aesthetic only; constraint-based design also reduces decision fatigue for the designer, simplifies developer implementation, and makes the design system maintainable across many contributors and many years.

A grid is a shared frame of reference that lets multiple decisions look like one decision. Without a grid, every margin, padding, column width, and spacing value is a small judgment call by whoever designed that screen — and across a product with hundreds of screens, those judgment calls accumulate into a visible chaos. The Swiss school's argument for grids in print (Müller-Brockmann, 1961) translates directly to digital: a grid frees the designer from layout decisions so attention can go to content, hierarchy, and craft.

So why three grids and not one? Because the three live at different scales. The 12-column grid governs regions: where the hero ends and the feature row starts. The baseline grid governs text lines: how reading rhythm holds across paragraphs. The 8pt grid governs spacing units: the increments from which all margins, padding, gaps, and component dimensions are built. Trying to express all three with a single grid forces compromises — too coarse for spacing, too fine for layout. Three cooperating systems are easier than one over-stressed one.

The historical accident

It's worth noting that we ended up with three grids partly by accident. The 12-column grid arrived first (Nathan Smith's 960.gs in 2008, Bootstrap in 2011) because float-based CSS desperately needed a layout primitive. The baseline grid was an inheritance from print (medieval scribes through Tschichold and Bringhurst), reluctantly adopted by web designers who realised long-form reading actually needs vertical rhythm. The 8pt grid came last (Material Design 2014, popularised by Bryn Jackson 2015) when product design hit a complexity wall and needed a system-level answer to "how big is the gap between this card and the next?"

If web design were being designed today from scratch, we might end up with two grids — or one — but we have three, every modern designer knows them, and they actually do cooperate well.

3. The baseline grid in 5 minutes

Horizontal lines spaced at a consistent interval — typically equal to your body-text line-height — that every text baseline sits on. When all text aligns to the same baseline grid, the page reads with unified vertical rhythm. (See the baseline grid overlay reference.)

The math

Set the baseline interval equal to your body-text line-height. If body text is 16px with line-height 1.5, baseline = 24px. Headings should use line-heights that are integer multiples of 24 (24, 48, 72) so they align to the same grid. A baseline grid used for vertical rhythm and a column grid solve different problems: the column grid places blocks horizontally, the baseline grid keeps text lines on a predictable vertical interval. The 4px or 8px subgrid is sometimes used as a finer alignment helper for non-text elements — an 8pt baseline gives a coarser, more forgiving rhythm than a 4pt baseline, which divides the interval in half for tighter type.

Why baseline alignment is harder on the web

CSS doesn't expose true font-baseline metrics directly — line-height sets the line box, not the baseline position within it. Different fonts at the same line-height have visibly different baseline positions because their internal metrics (cap height, x-height, descender depth) differ. The pragmatic answer: pick one body font, set unitless line-heights that produce integer pixel values at your base size, and accept that strict pixel-perfect baseline alignment is achievable only with effort. Editorial frameworks (Compass's Vertical Rhythm mixin, Tailwind's leading scale) help.

Where baseline rhythm earns its keep

Long-form reading. A novel, a magazine feature, a documentation site. Readers respond to vertical rhythm even when they don't notice it consciously — text that drifts from the baseline reads as slightly amateur even when nothing is technically wrong. For UI work (dashboards, forms, settings screens) baseline alignment matters less; the 8pt grid usually handles vertical spacing well enough.

5a. Why 12 columns specifically

The 12-column choice is not arbitrary. Twelve divides cleanly by 2, 3, 4, and 6 — which means a 12-column grid can be subdivided into halves (2 × 6), thirds (3 × 4), quarters (4 × 3), and sixths (6 × 2) without any column rounding. Eight columns divides only by 2 and 4; 10 columns only by 2 and 5; 16 columns only by 2, 4, and 8. The 12-column divisibility makes it the most flexible standard subdivision for content layouts, and it converged across major frameworks (Bootstrap, Foundation, Material Design, the Skeleton CSS framework, the 960 Grid System that preceded all of them) because of this property.

The 12-column grid is also a good fit for typical content patterns: a 2 + 10 layout works for a sidebar; a 4 + 8 works for a two-column with weighted sides; a 6 + 6 works for an even split; a 3 + 6 + 3 works for centred content with flanking elements. Almost every page layout you can describe in plain language maps to a clean 12-column division. Eight columns or 10 columns force compromises on most of these.

Some teams use 24-column grids for more granular control, but the trade-off is harder mental arithmetic and more designer-by-designer drift. For most product and marketing work, 12 columns is the sweet spot.

5. How the three systems cooperate

The three grids govern different axes:

• 12-column grid = horizontal block placement.
• Baseline grid = vertical text rhythm.
• 8pt grid = all other spacing increments.

They overlap in two productive places. First, gutter widths in the 12-column grid (typically 16, 24, or 32px) are 8pt multiples — so 8pt rhythm holds even at the column boundary. Second, common baseline intervals (24px = 3×8pt; 32px = 4×8pt) are 8pt multiples too — so vertical text rhythm and UI spacing rhythm reinforce each other.

The mental model that works: 8pt is the unit, baseline is the text-line specialisation, 12-column is the page-region overlay. Every spacing decision goes through 8pt; text-block heights additionally snap to baseline; section widths additionally snap to columns.

An example

A marketing-site feature row: container at 1200px (12-col XL), three feature cards each spanning 4 columns, 32px gap between cards (4×8pt), each card 24px internal padding (3×8pt), card title 24px line-height (1×24px baseline), card body 16px text on 24px line-height (1×baseline), 16px gap between title and body (2×8pt). Every measurement is an 8pt multiple; every column placement is a 12-col span; every text line snaps to the 24px baseline. The three systems agree on every pixel.

7. Implementing the three grids in CSS

12-column grid in CSS Grid

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.main { grid-column: span 8; }
.sidebar { grid-column: span 4; }

Baseline grid via line-height multiples

html { font-size: 16px; }
body { line-height: 1.5; }   /* 24px baseline */
h1 { font-size: 2rem; line-height: 3; margin: 1.5rem 0; }   /* 96px line, 2-baseline margin */
h2 { font-size: 1.5rem; line-height: 2; margin: 1.5rem 0; }
p { margin: 0 0 1.5rem; }   /* 24px = one baseline unit */

8pt grid via spacing tokens

:root {
  --space-1: 4px;   --space-2: 8px;   --space-3: 16px;
  --space-4: 24px;  --space-5: 32px;  --space-6: 48px;
  --space-7: 64px;  --space-8: 96px;
}
.card { padding: var(--space-4); gap: var(--space-3); }

Tailwind's defaults follow exactly this pattern: p-4 = 16px, p-6 = 24px, gap-2 = 8px, etc. The Tailwind spacing scale is a 4pt grid by default, which gives you 8pt rhythm via every-other token.

9a. Three case studies in grid use

Stripe — the disciplined product site

Stripe's marketing site is the most-cited contemporary example of grid-disciplined web design. Every section snaps to a 12-column grid with consistent gutters; every spacing decision is on the 8 px scale; the baseline grid is enforced across long-form content. The site's polish is largely a result of this discipline rather than of any single visually striking move. The takeaway: a strict grid is not boring; it is the foundation on which more interesting moves register as deliberate.

Apple — the marketing-led grid

Apple's marketing pages use the 12-column grid for layout structure but allow large hero imagery to break full-width past the container. Typography is grid-locked at the content level (paragraphs and headings on a baseline) but display type breaks the grid intentionally to land at specific positions in the hero. The result reads as "premium" specifically because the grid is mostly enforced and the breaks are rare. Half the design is the breaks; half is everything else staying in place.

The New York Times — the editorial baseline

The Times's web design enforces the baseline grid more rigorously than almost any other major site. Body text, headlines, captions, and pull quotes all snap to the same vertical rhythm. The 12-column grid is enforced at the section level but individual articles flow within wider single-column text blocks for readability. The takeaway: editorial content benefits more from baseline discipline than from column discipline, and editorial sites should weight their grid system accordingly.

9. When to break the grid

The Swiss-school answer: when the break carries meaning. A pull quote that crosses the column line; a hero image that bleeds full-width past the container; a headline whose size jumps two baseline units to land at the top of the page. These breaks register as design moves precisely because the grid is consistent everywhere else.

What doesn't work: ad-hoc breaks throughout, where the grid is visibly violated for no clear reason. The reader still feels the violations even without naming them; the result feels sloppy rather than expressive. The rule: break the grid intentionally and rarely, and let the surrounding compliance do the visual work.

Cases where breaking is normal

• Marketing hero sections — full-bleed background images, oversized type.
• Editorial features — pull quotes, art-directed inserts, full-page imagery.
• Empty states and onboarding — large illustrations don't snap to columns.
• Marketing-site footers — often span container fully even if the rest of the page is grid-bounded.

Frequently asked questions