Grid
A responsive 12–8–4 column grid keeps layouts aligned across breakpoints: 12 columns on desktop, 8 on tablet, 4 on mobile.
The 12–8–4 system
Columns are fluid; gutters are fixed at 24px on desktop and 16px below. Compose with Tailwind's grid utilities rather than hand-rolled widths.
Desktop ≥ 1024px — 12 columns
1
2
3
4
5
6
7
8
9
10
11
12
Tablet 768–1023px — 8 columns
1
2
3
4
5
6
7
8
Mobile < 768px — 4 columns
1
2
3
4
Usage
Declare the grid once per breakpoint and let content span columns.
<div className="grid grid-cols-4 gap-4 md:grid-cols-8 lg:grid-cols-12 lg:gap-6">
<main className="col-span-4 md:col-span-5 lg:col-span-8">…</main>
<aside className="col-span-4 md:col-span-3 lg:col-span-4">…</aside>
</div>Rules of thumb
- Page content lives in a centred container (
max-w-7xl) with 16–24px side padding. - Never nest a 12-column grid inside another 12-column grid — split into spans instead.
- Cards and form fields snap to whole columns; only charts and tables may bleed to the container edge.