# Stack and row

Use `stack` for a vertical composition and `row` for a wrapping horizontal composition. Choose spacing and alignment independently on the same container.

## Classes

| Name               | Description                                                                                                                 |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| `.stack`           | Flex column with content gaps. Children stretch across the available width by default.                                      |
| `.row`             | Wrapping flex row with content gaps. Children are centered on the cross axis by default.                                    |
| `.layout-gap`      | Uses layout gaps between independent blocks; keeps direction and alignment.                                                 |
| `.control-gap`     | Uses control gaps within a control group, such as a label and its field or a row of buttons; keeps direction and alignment. |
| `.justify-start`   | Places children at the start of the main axis.                                                                              |
| `.justify-center`  | Centers children on the main axis.                                                                                          |
| `.justify-end`     | Places children at the end of the main axis.                                                                                |
| `.justify-between` | Distributes remaining main-axis space between children.                                                                     |
| `.items-start`     | Aligns children at the start of the cross axis.                                                                             |
| `.items-center`    | Centers children on the cross axis.                                                                                         |
| `.items-end`       | Aligns children at the end of the cross axis.                                                                               |
| `.items-stretch`   | Stretches children across the cross axis when their size on that axis is automatic.                                         |

## Notes

- These classes add no frame, padding, text alignment or viewport height.
- Choose `.stack` or `.row`, at most one gap modifier, and at most one modifier from each alignment family. Do not combine opposing choices.
- `justify-*` and `items-*` require `.row` or `.stack` on the same element. `Section` already includes `.stack`; an ordinary flex container, `Grid` or `Card` does not opt in automatically.
- In horizontal writing mode, row's main axis is horizontal and stack's is vertical. `justify-*` follows the main axis; `items-*` follows the other axis. Centering needs free space; wrapped rows align their items per line.
- Default gaps use `--content-gap-block` and `--content-gap-inline`. Gap modifiers use the corresponding `--layout-gap-*` or `--control-gap-*` pair, and can also apply to a local CSS grid. They never set padding.
- Override one gap token to change one axis. Tokens inherit, so scope the override to the intended group. `Section` sets its gap through its `gap` preset, layout by default, so gap modifiers do not apply to it; jointive `Grid` and `Cards` tracks retain zero gap.

## Usage

```html
<div class="stack layout-gap">
  <div class="stack">
    <h2>Collection</h2>
    <p>Related content uses the default content gap.</p>
  </div>
  <nav class="row control-gap justify-end" aria-label="Collection actions">
    <a class="ui" href="/artworks">Explore</a>
    <a class="ui" href="/about">About</a>
  </nav>
</div>
```