Grid System
12-column grid, auto-fill/fit, named areas, gap scale, and asymmetric presets.
12-Column Grid
Base layout unit. All column spans derive from this 12-column foundation.
Column Spans
Common span combinations used across layouts.
Breakpoints
Tailwind's default responsive breakpoints. Resize the window to see the active indicator (bottom-right).
| Prefix | Min-width | px | Typical target | Example utility |
|---|---|---|---|---|
| base | 0 | 0px | Mobile portrait | grid-cols-1 |
| sm | 40rem | 640px | Mobile landscape / phablet | sm:grid-cols-2 |
| md | 48rem | 768px | Tablet portrait | md:grid-cols-3 |
| lg | 64rem | 1024px | Tablet landscape / laptop | lg:grid-cols-4 |
| xl | 80rem | 1280px | Desktop | xl:col-span-8 |
| 2xl | 96rem | 1536px | Wide desktop | 2xl:grid-cols-6 |
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4
Gap Scale
Tailwind gap utilities mapped to the spacing scale. Use --spacing-grid-gap token for the default grid gap.
gap-1
0.25rem / 4px
gap-2
0.5rem / 8px
gap-3
0.75rem / 12px
gap-4
1rem / 16px
gap-6
1.5rem / 24px
gap-8
2rem / 32px
gap-10
2.5rem / 40px
| Token | Value | Use when… |
|---|---|---|
| --spacing-gutter | clamp(1rem, 5vw, 4rem) | Page-level horizontal padding |
| --spacing-grid-gap | clamp(1rem, 2vw, 1.5rem) | Default gap between grid cells |
| --width-wrapper | 1280px | max-width for main content area |
| --width-narrow | 860px | Articles, forms, short pages |
| --width-prose | 70ch | Ideal reading column width |
Auto-fill & Auto-fit
Fluid grids that reflow without breakpoints — use auto-fill to preserve empty slots, auto-fit to collapse them.
auto-fill — minmax(160px, 1fr)
auto-fit — minmax(160px, 1fr)
Named Grid Areas
Semantic layout mapping via grid-template-areas. Common page shell: header / sidebar + main + aside / footer.
3-col page shell (sidebar + main + aside)
2-col (main 2fr + aside 1fr)
Asymmetric Presets
Opinionated column ratios for common commerce and editorial layouts. Use as inline grid-template-columns or extract to a utility class.
5fr 7fr
Asymmetric two-col — e.g. image + text
1fr 3fr
Filter panel + product grid
repeat(4,1fr)
4-up product grid
2fr 1fr 1fr
Hero card + two supporting cards
1fr 1fr 1fr 200px
List + fixed aside (e.g. order summary)