layout-cluster

Horizontal flex layout with wrapping. Ideal for groups of inline elements like buttons, tags, and navigation items.

Attributes

Attribute	Values	Default	Description
`data-layout-gap`	`none`, `3xs`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`	`s`	Gap between items, on the shared size scale.
`data-layout-justify`	`start`, `end`, `center`, `between`	`start`	Main-axis distribution.
`data-layout-align`	`start`, `end`, `center`, `stretch`, `baseline`	`center`	Cross-axis alignment.
`data-layout-nowrap`	(boolean)	—	Keep everything on one line; no wrapping.
`data-layout-overlap`	(bare), `xs`, `s`, `m`, `l`	`s`	Overlap items in reverse order (avatar groups). Bare attribute = s.
`data-container` (on main, article, section, aside)	(boolean)	—	Opt a semantic child back into container queries. The layout removes container-type from such children so they size to content; this restores it.

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

The data-layout-justify attribute controls horizontal distribution.

The data-layout-align attribute controls vertical alignment.

The data-layout-overlap attribute creates overlapping items - useful for avatar groups and stacked card effects.

Control overlap amount with size values: