API
Flexbox and grid
Tracks, placement, gaps, and alignment.
Grid tracks take a count (--grid-cols: 3 is three equal tracks) or subgrid; a raw track list goes in --template-cols. Place with --col-span, --col-start, --col-end and the --row-* twins, or write --col-start: 1; --col-end: -1 to span every track. Inside a layout, --band: layout-md places a child in a band.
Reference
| Utility | Writes | Value | Tiers | Notes |
|---|---|---|---|---|
--flex-wrap | flex-wrap | keyword | breakpoints | works tier-only |
--flex | flex | any CSS value | breakpoints | works tier-only |
--basis | flex-basis | any CSS value | breakpoints | works tier-only |
--shrink | flex-shrink | any CSS value | breakpoints | works tier-only |
--order | order | any CSS value | breakpoints | works tier-only |
--grid-cols | grid-template-columns | track count (equal tracks) or subgrid | breakpoints | Keywords: subgrid; works tier-only |
--grid-rows | grid-template-rows | track count (equal tracks) or subgrid | breakpoints | Keywords: subgrid; works tier-only |
--template-cols | grid-template-columns | any CSS value | breakpoints, states | works tier-only |
--template-rows | grid-template-rows | any CSS value | breakpoints, states | works tier-only |
--grid-fit | grid-template-columns | minimum track length (auto-fit columns) | breakpoints | |
--grid-flow | grid-auto-flow | keyword | breakpoints | works tier-only |
--auto-cols | grid-auto-columns | any CSS value | breakpoints | works tier-only |
--auto-rows | grid-auto-rows | any CSS value | breakpoints | works tier-only |
--band | grid-column | any CSS value | breakpoints | works tier-only |
--col-span | grid-column | span count | breakpoints | works tier-only |
--col-start | grid-column-start | any CSS value | breakpoints | works tier-only |
--col-end | grid-column-end | any CSS value | breakpoints | works tier-only |
--row-span | grid-row | span count | breakpoints | works tier-only |
--row-start | grid-row-start | any CSS value | breakpoints | works tier-only |
--row-end | grid-row-end | any CSS value | breakpoints | works tier-only |
--gap | gap | scale number or length | breakpoints | works tier-only |
--gap-x | column-gap | scale number or length | breakpoints | works tier-only |
--gap-y | row-gap | scale number or length | breakpoints | works tier-only |
--items | align-items | keyword | breakpoints | works tier-only |
--justify | justify-content | keyword | breakpoints | works tier-only |
--place-items | place-items | alignment keyword (center, start, end, stretch, safe end, …) | breakpoints | works tier-only |
--place-content | place-content | alignment keyword (center, start, end, space-between, safe end, …) | breakpoints | works tier-only |
--self | align-self | keyword | breakpoints | works tier-only |
Examples
--justify: start
a
b
c
--justify: center
a
b
c
--justify: space-between
a
b
c
<div
style="
--display: flex-col;
--gap: 6;
--w: 100%;
--max-w: 96;
"
>
<div
style="
--display: flex-col;
--gap: 2;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--justify: start</span
>
<div
style="
--display: flex;
--justify: start;
--p: 4;
--gap: 4;
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
<span data-ui="badge" data-badge-variant="primary">a</span>
<span data-ui="badge" data-badge-variant="primary">b</span>
<span data-ui="badge" data-badge-variant="primary">c</span>
</div>
</div>
<div
style="
--display: flex-col;
--gap: 2;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--justify: center</span
>
<div
style="
--display: flex;
--justify: center;
--p: 4;
--gap: 4;
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
<span data-ui="badge" data-badge-variant="primary">a</span>
<span data-ui="badge" data-badge-variant="primary">b</span>
<span data-ui="badge" data-badge-variant="primary">c</span>
</div>
</div>
<div
style="
--display: flex-col;
--gap: 2;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--justify: space-between</span
>
<div
style="
--display: flex;
--justify: space-between;
--p: 4;
--gap: 4;
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
<span data-ui="badge" data-badge-variant="primary">a</span>
<span data-ui="badge" data-badge-variant="primary">b</span>
<span data-ui="badge" data-badge-variant="primary">c</span>
</div>
</div>
</div>
--display: flex-row
1
2
3
--display: flex-col
1
2
3
<div
style="
--display: flex-col;
--gap: 11;
--w: 100%;
--max-w: 96;
"
>
<div
style="
--display: flex-col;
--gap: 2;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--display: flex-row</span
>
<div
style="
--display: flex;
--gap: 4;
"
>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
2
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
3
</div>
</div>
</div>
<div
style="
--display: flex-col;
--gap: 2;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--display: flex-col</span
>
<div
style="
--display: flex-col;
--gap: 4;
"
>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
2
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
3
</div>
</div>
</div>
</div>
--flex: none
--flex: 1
--flex: 1
<div
style="
--display: flex;
--gap: 4;
--w: 100%;
--max-w: 96;
"
>
<div
data-ui="text-sm"
style="
--flex: none;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
--flex: none
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
--flex: 1
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
--flex: 1
</div>
</div>
--basis: 1/2
--basis: 1/2
--basis: 1/3
--basis: 1/3
--basis: 1/3
<div
style="
--display: flex;
--flex-wrap: wrap;
--gap: 6;
--w: 100%;
--max-w: 96;
"
>
<div
data-ui="text-sm"
style="
--basis: calc((100% - 6 * var(--spacing)) / 2);
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
--basis: 1/2
</div>
<div
data-ui="text-sm"
style="
--basis: calc((100% - 6 * var(--spacing)) / 2);
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
--basis: 1/2
</div>
<div
data-ui="text-sm"
style="
--basis: calc((100% - 12 * var(--spacing)) / 3);
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-secondary-foreground);
--bg: var(--color-secondary);
--rounded: var(--radius-md);
"
>
--basis: 1/3
</div>
<div
data-ui="text-sm"
style="
--basis: calc((100% - 12 * var(--spacing)) / 3);
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-secondary-foreground);
--bg: var(--color-secondary);
--rounded: var(--radius-md);
"
>
--basis: 1/3
</div>
<div
data-ui="text-sm"
style="
--basis: calc((100% - 12 * var(--spacing)) / 3);
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-secondary-foreground);
--bg: var(--color-secondary);
--rounded: var(--radius-md);
"
>
--basis: 1/3
</div>
</div>
1st in markup · order-last
2nd in markup
3rd in markup · order-first
<div
style="
--display: flex;
--gap: 4;
--w: 100%;
--max-w: 96;
"
>
<div
data-ui="text-sm"
style="
--flex: 1;
--order: 9999;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
1st in markup · order-last
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
2nd in markup
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--order: -9999;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
3rd in markup · order-first
</div>
</div>
--gap: 2
1
2
3
--gap: 6
1
2
3
--gap: 24
1
2
3
<div
style="
--display: flex-col;
--gap: 11;
--w: 100%;
--max-w: 96;
"
>
<div
style="
--display: flex-col;
--gap: 2;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--gap: 2</span
>
<div
style="
--display: flex;
--gap: 2;
"
>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
2
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
3
</div>
</div>
</div>
<div
style="
--display: flex-col;
--gap: 2;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--gap: 6</span
>
<div
style="
--display: flex;
--gap: 6;
"
>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
2
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
3
</div>
</div>
</div>
<div
style="
--display: flex-col;
--gap: 2;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>--gap: 24</span
>
<div
style="
--display: flex;
--gap: 24;
"
>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
2
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
3
</div>
</div>
</div>
</div>
1
2
3
4
5
6
<div
style="
--display: grid;
--grid-cols: 3;
--gap: 6;
--w: 100%;
--max-w: 96;
"
>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
2
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
3
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
4
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
5
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
6
</div>
</div>
--col-span: 2
1
1
--col-span: 2
--col-start: 1; --col-end: -1
<div
style="
--display: grid;
--grid-cols: 3;
--gap: 6;
--w: 100%;
--max-w: 96;
"
>
<div
data-ui="text-sm"
style="
--col-span: 2;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
--col-span: 2
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--col-span: 2;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
--col-span: 2
</div>
<div
data-ui="text-sm"
style="
--col-start: 1;
--col-end: -1;
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-secondary-foreground);
--bg: var(--color-secondary);
--rounded: var(--radius-md);
"
>
--col-start: 1; --col-end: -1
</div>
</div>
--display: flex-col; --display--sm: flex-row — stacks on a narrow container, rows out on a wide
one. Expand to see it.
Sidebar
Content
Aside
<div
style="
--display: flex-col;
--gap: 2;
--w: 100%;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>
--display: flex-col; --display--sm: flex-row — stacks on a narrow container, rows out on a wide
one. Expand to see it.
</span>
<div
style="
--display: flex-col;
--display--sm: flex-row;
--gap: 6;
--w: 100%;
"
>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 6;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
Sidebar
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 6;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
Content
</div>
<div
data-ui="text-sm"
style="
--flex: 1;
--p: 6;
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
--bg: var(--color-muted);
--rounded: var(--radius-md);
"
>
Aside
</div>
</div>
</div>
--grid-cols: 1; --grid-cols--sm: 2; --grid-cols--md: 3; --grid-cols--lg: 4 — expand to widen the
container.
1
2
3
4
5
6
7
8
<div
style="
--display: flex-col;
--gap: 2;
--w: 100%;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>
--grid-cols: 1; --grid-cols--sm: 2; --grid-cols--md: 3; --grid-cols--lg: 4 — expand to widen the
container.
</span>
<div
style="
--display: grid;
--grid-cols: 1;
--grid-cols--sm: 2;
--grid-cols--md: 3;
--grid-cols--lg: 4;
--gap: 6;
--w: 100%;
"
>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
2
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
3
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
4
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
5
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
6
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
7
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
8
</div>
</div>
</div>
--grid-fit: 10rem — as many 10rem tracks as fit, then wrap. Expand to widen.
1
2
3
4
5
6
7
8
<div
style="
--display: flex-col;
--gap: 2;
--w: 100%;
"
>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text: var(--color-muted-foreground);
"
>
--grid-fit: 10rem — as many 10rem tracks as fit, then wrap. Expand to widen.
</span>
<div
style="
--display: grid;
--grid-fit: 10rem;
--gap: 6;
--w: 100%;
"
>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
1
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
2
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
3
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
4
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
5
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
6
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
7
</div>
<div
data-ui="text-sm"
style="
--p: 4;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
8
</div>
</div>
</div>