Stack, Cluster and Grid

Stack

A .canon-stack: its children one under another, a steady gap apart, each as wide as the stack. A page's sections, cards in a column, a form above a table.

Cluster

A .canon-cluster: its children in a row at their own widths, centered on each other, wrapping onto more lines when there isn't room. Tags, a few buttons, a record's facts. data-align="end" on a child sends it, and what follows it, to the row's end. Drag the frame's corner to see it wrap.

Grid

A .canon-grid: equal columns, as many as fit at --canon-grid-min (16rem) each, its children filling them in order. data-columns (2 to 6) caps how many. No breakpoints: the grid fits the room it has, in a page, a Card or a Drawer. Here at most three; drag the corner.

Narrower columns

style="--canon-grid-min: 10rem" sets the narrowest a column may be, for smaller things like settings tiles.

Gap

data-gap: sm, md (the default), lg, xl or none, steps of Canon's spacing, never lengths. Things that belong together sit close; a page's sections sit far apart. It isn't inherited: each stack, cluster or grid has its own.

A page

They nest: a page is a Stack of Sections (data-gap="xl"), each holding a Grid of stats or a Cluster of actions.

Size

The gaps follow data-size on the container or one above it: the same step is tighter at sm and roomier at lg.

Edge cases

Right to left, rows and columns run from the right, and end is the left. A long word wraps inside its column instead of widening the grid.