Grid System
A 12-column CSS Grid with responsive breakpoints, alignment utilities, and subgrid support.
Basic Grid
Wrap columns in .ug-grid. Use .ug-col--N for column spans (1-12).
Equal columns
.ug-col--4
.ug-col--4
.ug-col--4
<div class="ug-grid">
<div class="ug-col--4" style="background:#e8e5e0;padding:0.5rem;text-align:center">.ug-col--4</div>
<div class="ug-col--4" style="background:#e8e5e0;padding:0.5rem;text-align:center">.ug-col--4</div>
<div class="ug-col--4" style="background:#e8e5e0;padding:0.5rem;text-align:center">.ug-col--4</div>
</div>Asymmetric
.ug-col--8
.ug-col--4
<div class="ug-grid">
<div class="ug-col--8" style="background:#e8e5e0;padding:0.5rem;text-align:center">.ug-col--8</div>
<div class="ug-col--4" style="background:#e8e5e0;padding:0.5rem;text-align:center">.ug-col--4</div>
</div>Responsive
Use .ug-col--{bp}-{n} for responsive column spans.
| Prefix | Breakpoint | Width |
|---|---|---|
| (none) | Default | All sizes |
sm | ≥ 480px | Phone landscape |
md | ≥ 768px | Tablet |
lg | ≥ 1024px | Desktop |
xl | ≥ 1280px | Large desktop |
Responsive: stacks on mobile
Column
Column
Column
<div class="ug-grid">
<div class="ug-col--12 ug-col--md-6 ug-col--lg-4" style="background:#e8e5e0;padding:0.5rem;text-align:center">Column</div>
<div class="ug-col--12 ug-col--md-6 ug-col--lg-4" style="background:#e8e5e0;padding:0.5rem;text-align:center">Column</div>
<div class="ug-col--12 ug-col--md-12 ug-col--lg-4" style="background:#e8e5e0;padding:0.5rem;text-align:center">Column</div>
</div>Modifiers
No gap
1
2
3
<div class="ug-grid ug-grid--no-gap">
<div class="ug-col--4" style="background:#e8e5e0;padding:0.5rem;text-align:center;border:1px solid #fff">1</div>
<div class="ug-col--4" style="background:#e8e5e0;padding:0.5rem;text-align:center;border:1px solid #fff">2</div>
<div class="ug-col--4" style="background:#e8e5e0;padding:0.5rem;text-align:center;border:1px solid #fff">3</div>
</div>Class Reference
| Class | Description |
|---|---|
.ug-grid | 12-column grid container |
.ug-grid--no-gap | Remove gap between columns |
.ug-grid--dense | Dense auto-flow packing |
.ug-grid--rows | Add 20 explicit rows |
.ug-col--N (1-12) | Column span |
.ug-col--start-N (1-12) | Column start position |
.ug-col--bp-N (sm|md|lg|xl) | Responsive column span |
.ug-row--N (1-10) | Row span |
.ug-row--start-N (1-10) | Row start position |
.ug-subgrid | CSS subgrid alignment |