# Foundations · Grid

12-column responsive grid, with gutters that scale by breakpoint.

| Breakpoint | Columns | Gutter | Margin |
|------------|---------|--------|--------|
| < `md` (mobile) | 4 | 16px | 16px |
| `md` (tablet) | 8 | 24px | 24px |
| ≥ `lg` (desktop) | 12 | 24px | 32px |

Max content width: **1200px**, centered.

## Composition

- **Cards** snap to multiples of 3 columns (4-up / 3-up / 2-up).
- **Form fields** snap to multiples of 4 (full / half / third / quarter).
- **Sidebar layouts** reserve 3 columns left (240px ≈ 3 cols at 1200px container) and 9 columns for content.

## Rules

- ✅ Use CSS Grid for page layout, Flexbox for component internals.
- ✅ When in doubt, give content more room — KDS is generous with whitespace.
- ❌ Don't fight the grid for visual interest. Asymmetry comes from content rhythm, not from breaking the column structure.