Back to docs
Grid system
Meridian uses a 12-column responsive grid built on CSS Grid. Every layout primitive snaps to this system.
Columns
1
2
3
4
5
6
7
8
9
10
11
12
Each column is a fractional unit. Combine spans with col-span-{n}.
Responsive breakpoints
| Prefix | Min width | Example |
|---|---|---|
| sm | 640px | sm:col-span-6 |
| md | 768px | md:col-span-4 |
| lg | 1024px | lg:col-span-3 |
| xl | 1280px | xl:col-span-2 |
Common patterns
Sidebar + content
Three-card row