col-4
col-4
col-4
col-3
col-6
col-3
col-2
col-8
col-2
Grid Reference ↓
12-column grid - equal columns
Auto-fit Grid
auto
auto
auto
auto
Fixed column grids
ui-grid--2
1
2
ui-grid--3
1
2
3
ui-grid--4
1
2
3
4
ui-grid--6
1
2
3
4
5
6
Gap sizes
gap-1
gap-1
gap-1
gap-1
gap-2
gap-2
gap-2
gap-2
gap-3
gap-3
gap-3
gap-3
gap-4
gap-4
gap-4
gap-4
gap-6
gap-6
gap-6
gap-6
gap-8
gap-8
gap-8
gap-8
ui-column-full & ui-row-span-2
ui-column-full
row-span-2
col
col
col
col
Align
Horizontal - justify-content
ui-align-left
A
B
ui-align-center
A
B
ui-align-right
A
B
ui-align-between
A
B
Vertical - align-items
ui-align-top
A
B
ui-align-middle
A
B
ui-align-bottom
A
B
ui-align-stretch
A
B
Combined - horizontal + vertical
center + middle
A
B
right + bottom
A
B
between + middle
A
B
Reference
Base
| Class | Values |
|---|---|
.ui-grid | 12-column CSS Grid container |
.ui-grid--* | 2, 3, 4, 6 — fixed equal-column grids |
.ui-grid-auto | auto-fit responsive grid |
.ui-col-* | 1–12 — column span inside .ui-grid |
.ui-column-full | span all 12 columns |
.ui-row-span-2 | span 2 rows |
.ui-gap-* | 1–8 |
.ui-flex | display:flex row |
.ui-flex-column | flex-direction:column |
.ui-flex-wrap | flex-wrap:wrap |
.ui-items-* | start, center, end, stretch (align-items) |
.ui-justify-* | start, center, end, between, around, evenly |
Modifiers
| Class | Values |
|---|
Options
| Class | Values |
|---|