## col-ui

Flex column. Children stack vertically with a consistent gap.

Item one Item two Item three
Item one Item two Item three
Item one Item two Item three
Item one Item two Item three
Item one Item two Item three

## row-ui

Flex row. Children lay out horizontally.

A B C
A B C

## justify

Main-axis distribution. One of start, center, end, space-between, space-around.

A B
A B
A B
A B

## align

Cross-axis alignment. One of start, center, end, stretch, baseline (row only).

A B
A B
A B
A B

## wrap

Allow row children to wrap onto additional lines when they overflow.

One Two Three Four Five

## grid-ui

CSS grid with a fixed column count or responsive auto-fill / auto-fit.

1 2 3 4
1 2 3 4 5 6
A B C D

## stack-ui

Overlay children in the same cell. Use align to position them within the stack.

## Combinations

Nested layouts composing a typical card-style region.

Title Action Stat A Stat B Stat C Stat D

## Edge Cases

Boundary conditions.

Only child
No gap No gap

## Usage

<col-ui gap="md"> <row-ui justify="space-between"> <div>Title</div> <div>Action</div> </row-ui> <grid-ui columns="3" gap="sm">...</grid-ui> </col-ui>

## Properties

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`.

## Events

None.

## CSS Tokens

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.

## Authoring rules

- Never emit inline flex CSS. Always use `<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 values are not pixel values. `gap="4"` means `--a-space-4` (16px at default density), not 4px. Use the spacing scale, not raw numbers.
- Use `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.
- Prefer `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.
- Don't use Tailwind-style utility classes. AdiaUI does not include Tailwind or Bootstrap. Every layout need has a corresponding primitive — reach for the component, not a class.
- Don't nest `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.