Ratio

The default Stack engine. The weights you write become a module of equal tracks, and each lane spans its own weight.

Write lanes="2|1" and ratio builds repeat(3, minmax(0, 1fr)) — the weights added up — then gives the first lane span 2 and the second span 1. Between the tracks sits a real CSS gap, so the gutter is a free dial rather than a reserved column. Compare snap, which fits every layout to one fixed 25-column grid.

A lane spans its tracks and the gutters between them, which is arithmetic rather than a choice — a span contains what it crosses. So equal splits are exact at any count, while an unequal weight absorbs the gutters it spans: 2|1 renders about 2.14:1, not 2:1. The wide lane gains (w−1)g / (w+1), which approaches one gutter and never exceeds it.

Each example measures itself, so its gutters are to scale rather than to the page's. The arrangements are exact.

Equal splits

Halves through sixths — every one exact, at any count.

Exact because each lane spans a single track, so none of them crosses a gutter. Snap manages most of these too, but only where the arithmetic allows: its slots share 24 columns once gutters are reserved, so an even split needs a count that divides 24. Fifths land on 4|4|4|4|3.

The list stops at six. Past that you are no longer arranging regions, you are tiling a collection — which reflows with the container width and is Grid's job. A ratio module is fixed: a 1|1|1|1|1|1 Stack is six lanes at every width.

Unequal weights

What happens when a lane spans more than one track.

Rendered at the same width and gap as the equal splits above, so the boundaries still line up. 1|2 and 2|1 break where 1|1|1 breaks; 1|3 and 3|1 break where 1|1|1|1 does.

The rule is arithmetic: two Stacks share lane boundaries when one weight total is a whole multiple of the other. 2|3|5 totals ten, so it agrees with every row of halves and fifths above it and with nothing else.

A page written in twelfths

Every row totals twelve.

So every row shares every boundary — and twelve divides by 2, 3, 4 and 6, so the rows above agree with these too. That is a 12-column grid, with no prop, no dial and no third engine: it is an authoring convention, not a thing to build.

Which is why dede ships no classic 12/24/60 grid component. Pick a total, write every band as a division of it, and the whole page snaps to shared lines — at whatever resolution the page actually needs.