Navigation

layout-grid

Auto-fit responsive grid layout. Creates equal-width columns that automatically reflow based on available space.

Attributes

Attribute	Values	Default	Description
`data-layout-min`	`xs`, `s`, `m`, `l`, `xl`	`m`	Minimum column width before wrapping: 8 / 10 / 15 / 20 / 25rem. One-off lengths: style="--layout-min: 220px".
`data-layout-gap`	`none`, `3xs`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`	`m`	Gap between cells, on the shared size scale.
`data-layout-subgrid`	(bare), `2`, `4`	`3`	Children become subgrid rows so header/content/footer align across cells. Bare = span 3 rows; 2 or 4 for other card shapes.

The data-layout-min attribute sets the minimum width each column can shrink to before the grid reflows.

The data-layout-gap attribute controls spacing between grid items.