FoundationsGrid
12 columns on desktop, 1 on mobile, never in between.
The grid is a 12-column system with 24 px gutters on desktop, collapsing to a single column on mobile. The few layouts that need a different shape are named and documented.
The four breakpoint rules
The grid is the same 12-column system as Tailwind's default. The site uses a subset of it: the system has rules for what should happen at each breakpoint, and they are the same for every component.
| Breakpoint | Columns in use | Gap |
|---|---|---|
| Mobile (< 640 px) | 1 | 16 px |
| Tablet (640 → 1024 px) | 2 | 20 px |
| Laptop (1024 → 1280 px) | 2 → 3 | 24 px |
| Desktop (≥ 1280 px) | 3 → 4 | 32 px |
The seven named layouts
A "named layout" is a grid that gets reused across multiple components. It is documented because the responsive behavior is not obvious from the className alone.
| Layout | Behavior |
|---|---|
case-hero | Two columns: title (8/12), meta (4/12) on desktop. Single column on mobile. |
study-diagram | Five columns (steps), 2 (participants), 1 (notes) on desktop. One column on mobile. |
study-metrics | 2x2 grid on desktop, 1x4 on mobile. Cross dividers on desktop. |
card-strip | Three columns on desktop, two on tablet, one on mobile. 16 px gap. |
ds-home__three | Three columns on desktop and tablet, one on mobile. 24 px gap. |
ds-grid-2 | Two columns on desktop, one on mobile. Used in Do/Don't, Changelog. |
ds-shadow-grid | Auto-fill 15 rem cards. Three columns on desktop, two on tablet, one on mobile. |
Three-up, the most common pattern
Three equal columns on desktop, two on tablet, one on mobile.
Card 1
Equal weight, equal gap, equal radius.
Card 2
Equal weight, equal gap, equal radius.
Card 3
Equal weight, equal gap, equal radius.
Asymmetric patterns
Most layouts are equal-weight. A few are asymmetric. The four patterns below cover the asymmetric cases in active use; new ones should be argued, not invented.
| Pattern | Use |
|---|---|
| Half-half | Hero image left, prose right; or prose left, image right |
| Three-up | Three feature cards, equal weight |
| Asymmetric 2/3 + 1/3 | Main content + side rail, e.g. case study metrics |
| Strip (1xN) | Horizontal scroller on mobile, grid on desktop |
The recipe
.grid-12 {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1.5rem;
}
@media (max-width: 1023px) {
.grid-12 { grid-template-columns: 1fr; }
}
.col-8 { grid-column: span 8; }
.col-4 { grid-column: span 4; }
@media (max-width: 1023px) {
.col-8, .col-4 { grid-column: span 1; }
}Why a 12-column grid
A 12-column grid is a 2 × 2 × 3 grid: it divides cleanly into halves, thirds, and quarters, and it composes well with 8-column and 4-column sub-grids. A 16-column grid is more flexible but harder to argue about in PRs. A 4-column grid is simpler but cannot express a 2/3 + 1/3 asymmetric layout without breaking it.
The grid is the "container" of the layout, not the layout itself. A page template decides how many columns each section gets; the grid enforces the rules about how they line up.