Layout · Box

Box

Universal box-model utility. Every prop maps to a CSS custom property; unset props fall through to the normal cascade.

Live example

Cell A Cell B Cell C

Props

Prop Type Notes
display LayoutDisplay block · inline · flex · grid · …
width / minWidth / maxWidth number | string number → px, string passes through
height / minHeight / maxHeight number | string same as above
padding / paddingX / paddingY number | string number → var(--space-N)
paddingTop / paddingRight / paddingBottom / paddingLeft number | string per-side overrides
margin / marginX / marginY / sides number | string same mapping as padding
gap number | string for flex/grid containers
position / top / right / bottom / left various position + insets
inset / insetX / insetY number | string shorthand insets
overflow / overflowX / overflowY LayoutOverflow visible · hidden · clip · scroll · auto
flex / grow / shrink / basis / order / alignSelf / justifySelf various item-side flex/grid props
style string extra inline style; merged after Box vars

Reference