system / layout

Layout

Space the gap, not the elements. Reach for gap and space-y on the container; never reach for margin-bottom (pb / mb) on children. A container owns the rhythm between its items, so spacing stays even when items are added, removed, or reordered.

The rule
Avoid<div className="pb-4">

Margin on a child leaks: the last item adds a trailing gap, and reordering breaks the rhythm. Each child has to know its neighbour.

Prefer<div className="flex flex-col gap-4">

The container owns the gap. Every child is spaced equally, nothing trails, and order is free. One value to change.

Stack — vertical rhythm
flex column + gap
One
Two
Three
flex flex-col gap-4
space-y (flow content)
One
Two
Three
space-y-4
Row — horizontal rhythm
flex row + gap, wrapping
A
B
C
D
flex flex-wrap gap-3
Grid — two-dimensional rhythm
grid + gap
1
2
3
4
5
6
grid grid-cols-3 gap-4

Page layout uses the 12-column grid (repeat(var(--grid-columns), …)); place by column span, never by a measured offset. The gutter is the grid gap — the same gap idea, scaled up to the page.

Edges

Padding (p-*) is fine — it is a container spacing its own inside. The page margin is the one token var(--grid-margin), a clamp that breathes with the viewport. Between siblings, always gap.