Layout

A few container classes on plain divs. Children take their natural size and stack from the start; stretch is the one thing that flexes.

Spacing

One rule: components carry no outer margin. Spacing is always the container's job — every layout class spaces its immediate children with a single gap, so the same component sits correctly in a row, a grid or a flow.

The space between the items is the container's gap; the items have no margin:

Item
Item
Item

Row & column

A row lays children in a line, a column in a stack. Each child keeps its natural size — so a fixed item is just a width, no class needed.

140px
stretch — fills the rest
auto
<div class="row">
  <div style="width:140px">fixed</div>
  <div class="stretch">fills the rest</div>
  <div>natural width</div>
</div>

Stretch

stretch takes the remaining space. Leave it empty as a spacer to push things apart, or put content inside it to make a flexible region. Two stretches split evenly; stretch-2 takes a double share.

Empty spacer — pushes the last item to the end:

Brand
Right

Weighted regions — 2 : 1:

two shares
one share
<div class="row">
  <div>Brand</div>
  <div class="stretch"></div>   <!-- spacer -->
  <div>Right</div>
</div>

Grid

Equal-width cells that drop to fewer columns as the screen narrows. Auto-fits by default; add cols-3 to fix the count.

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
<div class="grid cols-3">
  <div class="panel">Card 1</div> …
</div>

Flow

Items keep their own width and wrap the line when they run out of room — for things of different sizes like tags, chips and buttons.

short a longer one mid another longer item tiny accent 
<div class="flow">
  <span class="chip">short</span>
  <span class="chip">a longer one</span> …
</div>

Sizing

Specific sizes are one-offs, so they're inline styles, not classes: width, height, min-width, max-width (and the height equivalents).

Fixed and capped

width: 160px
stretch, max-width: 320px
<div class="panel" style="width:160px">fixed</div>
<div class="stretch" style="max-width:320px">flex, but capped</div>

The axis rule

A bare width/height always works on the cross axis (a row's height, a column's width). On the main axis it just sets the natural size — which is exactly what you want, since children don't flex unless they're a stretch.