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.

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

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