Layout primitives — flex columns, flex rows, CSS grids, and stacked overlays — each with consistent gap, alignment, and justification controls.
Flex column. Children stack vertically with a consistent gap.
Flex row. Children lay out horizontally.
Main-axis distribution. One of start, center, end, space-between, space-around.
Cross-axis alignment. One of start, center, end, stretch, baseline (row only).
Allow row children to wrap onto additional lines when they overflow.
CSS grid with a fixed column count or responsive auto-fill / auto-fit.
Overlay children in the same cell. Use align to position them within the stack.
Nested layouts composing a typical card-style region.
Boundary conditions.
col-ui
| Property | Type | Default | Description |
|---|---|---|---|
| justify | String | 'start' | Main-axis distribution. start, center, end, space-between, space-around. |
| align | String | 'stretch' | Cross-axis alignment. start, center, end, stretch. |
| gap | String | 'md' | Space between children. Named xs–xl (parametric, via --a-gap-k) or integer rung 0–16; at k=1 they coincide (md=3). |
row-ui
| Property | Type | Default | Description |
|---|---|---|---|
| justify | String | 'start' | Main-axis distribution. |
| align | String | 'center' | Cross-axis alignment. Adds baseline. |
| gap | String | 'md' | Space between children. Named xs–xl or integer 0–16 (same grammar as col-ui). |
| wrap | Boolean | false | Allow children to wrap onto additional lines. |
grid-ui
| Property | Type | Default | Description |
|---|---|---|---|
| columns | String | '3' | Column count (1–6) or responsive preset (auto-fill, auto-fit). |
| gap | String | 'md' | Space between rows and columns. Named xs–xl or integer 0–16. |
| column-gap | String | '' | Override column gap independently. |
| row-gap | String | '' | Override row gap independently. |
stack-ui
| Property | Type | Default | Description |
|---|---|---|---|
| align | String | 'center' | Positioning of overlaid children. center, top, bottom, left, right, top-left, top-right, bottom-left, bottom-right. |
None.
col-ui
| Token | Default | Description |
|---|---|---|
| --col-gap | var(--a-space-3) | Gap between children. |
| --col-justify | flex-start | Main-axis distribution. |
| --col-align | stretch | Cross-axis alignment. |
row-ui
| Token | Default | Description |
|---|---|---|
| --row-gap | var(--a-space-3) | Gap between children. |
| --row-justify | flex-start | Main-axis distribution. |
| --row-align | center | Cross-axis alignment. |
grid-ui
| Token | Default | Description |
|---|---|---|
| --grid-columns | 3 | Number of columns. |
| --grid-gap | var(--a-space-3) | Default row and column gap. |
| --grid-column-gap | var(--grid-gap) | Column-only gap override. |
| --grid-row-gap | var(--grid-gap) | Row-only gap override. |
stack-ui
| Token | Default | Description |
|---|---|---|
| --stack-align | center | place-items value for overlaid children. |
<row-ui gap="N"> and <col-ui gap="N"> instead of style="display:flex; gap:16px". The gap value is a unitless integer mapping to --a-space-N and responds to --a-density automatically.gap="4" means --a-space-4 (16px at default density), not 4px. Use the spacing scale, not raw numbers.grid-ui for fixed column counts and row-ui wrap for wrapping collections. Use grid-ui columns="1 2@sm 4@lg" for responsive grids rather than multiple hidden elements.wrap-at="bp" over always-on wrap for toolbars and action rows. wrap-at="sm" keeps the row single-line on desktop while allowing natural wrapping on mobile.row-ui inside col-ui when grid-ui would express the same layout in one element with less nesting. Nested flex containers are harder to reason about at breakpoints.