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 10rem, 12rem, 15rem, 18rem, 20rem, 25rem 15rem Minimum column width before wrapping
data-layout-gap none, xs, s, m, l, xl m Gap between grid items

Minimum Width Variants

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

Gap Variants

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

Usage Examples

Product Grid

Feature Cards

Stats Grid

Related
↑