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.

Item

<div class="row">
  <div class="panel stretch">Item</div>
  <div class="panel stretch">Item</div>
  <div class="panel stretch">Item</div>
</div>

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

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 class="panel" style="width:140px">140px</div>
  <div class="panel stretch">stretch fills the rest</div>
  <div class="panel">auto</div>
</div>

A "row" mixing a fixed width, a "stretch", and natural width

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.

Brand

Right

<div class="row">
  <div class="panel">Brand</div>
  <div class="stretch"></div>   <!-- spacer -->
  <div class="panel">Right</div>
</div>

An empty "stretch" spacer pushing the last item to the end

two shares

one share

<div class="row">
  <div class="panel stretch stretch-2">two shares</div>
  <div class="panel stretch">one share</div>
</div>

Weighted regions, 2 : 1

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 class="panel">Card 2</div>
  …
  <div class="panel">Card 6</div>
</div>

A "grid cols-3" of equal-width panel cells

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>
  …
  <span class="chip accent">accent</span>
</div>

A "flow" of wrapping chip spans

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: 120px

stretch, max-width: 180px

<div class="row">
  <div class="panel" style="width:120px">width: 120px</div>
  <div class="panel stretch" style="max-width:180px">stretch, max-width: 180px</div>
</div>

Inline "width" and a "stretch" capped by "max-width"

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.