Layout — Spacing
One scale drives gap (see Flex), every padding token, and
every margin token — so a md gap and a md padding are always the same size.
xs
sm
md
lg
xl
<div and-layout="p:md">Padded on all sides</div>| Token | Value | Token | Value |
|---|---|---|---|
none | 0 | lg | 1.5rem |
xxxs | 0.125rem | xl | 2rem |
xxs | 0.25rem | xxl | 3rem |
xs | 0.5rem | xxxl | 4rem |
sm | 0.75rem | auto | auto |
md | 1rem |
auto only applies to margin — it’s what makes the margin utilities double as a
centering tool: m-x:auto on a width-constrained block centers it horizontally
(see Recipes → Center a block).
Padding & margin
Section titled “Padding & margin”| Token | Direction |
|---|---|
p, m | All four sides |
p-t, p-b, p-l, p-r | Top / bottom / left / right (padding) |
m-t, m-b, m-l, m-r | Top / bottom / left / right (margin) |
p-x, m-x | Left + right |
p-y, m-y | Top + bottom |
Example combining several: and-layout="p:lg m-x:auto gap-x:md".
Responsive
Section titled “Responsive”Every token above accepts a @breakpoint suffix — see
Overview → Responsive for the breakpoint table:
<!-- padding grows with viewport --><div and-layout="p:sm p@md:lg">…</div>