Layout
One grid carries every screen: four columns on a phone, eight on a tablet, twelve from a laptop up. Everything else — gutters, page padding, the rhythm between sections — is a token, never a number typed into a component.
The grid
The plugin emits these as --grid-columns, --inner-gutter, --outer-gutter and --container-width. Read the variables; never re-derive the numbers. --container-width in particular is auto below xl, so arithmetic on it silently invalidates the whole declaration.
Columns in place
grid-layout is the grid; grid-col-span-N places a child on it. The darker bars are the four that survive on a phone. Resize the window and the count follows the table above — the grid adapts, the markup does not.
Spacing
space-1
space-2
space-3
pad-1
pad-2
pad-3
Each token already shifts per breakpoint. Writing gap-space-1 lg:gap-space-2 bypasses that curve and skips a step — pick one token and let it adapt.