# Stack

A column of things with one gap between them. Group tightly, separate generously, and let the gap come from the parent, never from a margin on each child.

Foundation · Free · https://tactileui.dev/docs/foundations/stack

## One gap, set by the parent

A stack is a grid with one column and a gap from the spacing scale. The parent owns the space, so a child can be added, removed or hidden and the rhythm holds. Nothing inside a stack carries a margin of its own.

Harbour dues

Charged by the metre, each night, from the day you arrive.

```
.stack { display: grid; gap: var(--tui-3); }          /* 12px between neighbours */
.stack > * { margin: 0; }                              /* the gap is the only space */
```

## Tight inside, loose between

Things that belong together sit close; groups sit further apart. Nest stacks rather than raising one gap: a label and its control are 6px apart, fields in a form are 16px apart, and sections of a page are 72 to 96px apart. When every gap is the same, nothing reads as a group.

VesselBerth

```
<div style="display: grid; gap: var(--tui-5)">        <!-- fields: 20px apart -->
  <div style="display: grid; gap: 6px">                 <!-- label and control: 6px -->
    <label class="tui-label" for="vessel">Vessel</label>
    <input class="tui-input" id="vessel">
  </div>
  …
</div>
```

## A row of the same

Turn the stack on its side with `display: flex`, `flex-wrap: wrap` and the same gap, and keys, tags and chips wrap onto a second line on a phone instead of overflowing. Give the row `align-items: center` when its children differ in height.

```
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tui-2) var(--tui-3); }
```

## Rules

- The gap comes from the parent. A child never sets its own top or bottom margin.
- Use the scale (`--tui-1` to `--tui-12`), never a number of your own.
- Do not use one gap for everything: nest stacks so related things sit closer than unrelated ones.
- Let a row wrap. A control that cannot wrap is a control that scrolls sideways on a phone.

## The full law

This page is a summary in plain words. The brain holds the law itself, in `grid-and-spacing.md`, written for an agent to follow. It ships with the Kit.