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.

data-layout-min="10rem" (narrow)

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

data-layout-min="15rem" (default)

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

data-layout-min="20rem" (wide)

Card 1

Card 2

Card 3

Card 4

Code

<layout-grid data-layout-min="10rem" data-layout-gap="m"> <layout-card>Card 1</layout-card> <layout-card>Card 2</layout-card> <layout-card>Card 3</layout-card> </layout-grid> <layout-grid data-layout-min="20rem" data-layout-gap="m"> <!-- Wider minimum columns --> </layout-grid>

Gap Variants

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

data-layout-gap="xs"

1
2
3
4

data-layout-gap="l"

1
2
3
4

Usage Examples

Product Grid

Product 1

Product Name

$29.99
Product 2

Product Name

$34.99
Product 3

Product Name

$24.99
<layout-grid data-layout-min="15rem" data-layout-gap="l"> <layout-card data-variant="outlined"> <layout-stack data-layout-gap="s"> <div data-media data-layout-ratio="4:3" data-radius="s"> <img src="product.jpg" alt="Product" loading="lazy" /> </div> <h4>Product Name</h4> <p>$29.99</p> </layout-stack> </layout-card> <!-- More products... --> </layout-grid>

Feature Cards

Fast Performance

Optimized for speed with minimal overhead.

 Accessible

Built with WCAG guidelines in mind.

 Progressive

Works without JavaScript, enhances with it.
<layout-grid data-layout-min="18rem" data-layout-gap="m"> <layout-card> <layout-stack data-layout-gap="s"> <strong>Fast Performance</strong> <p>Optimized for speed with minimal overhead.</p> </layout-stack> </layout-card> <layout-card> <layout-stack data-layout-gap="s"> <strong>Accessible</strong> <p>Built with WCAG guidelines in mind.</p> </layout-stack> </layout-card> <layout-card> <layout-stack data-layout-gap="s"> <strong>Progressive</strong> <p>Works without JavaScript, enhances with it.</p> </layout-stack> </layout-card> </layout-grid>

Stats Grid

1,234 Total Users 567 Active Today 89% Satisfaction 42 New Signups

CSS Implementation

layout-grid { display: grid; gap: var(--_gap, var(--size-m)); grid-template-columns: repeat(auto-fit, minmax(var(--_min, 15rem), 1fr)); &[data-layout-min="10rem"] { --_min: 10rem; } &[data-layout-min="12rem"] { --_min: 12rem; } &[data-layout-min="15rem"] { --_min: 15rem; } &[data-layout-min="18rem"] { --_min: 18rem; } &[data-layout-min="20rem"] { --_min: 20rem; } &[data-layout-min="25rem"] { --_min: 25rem; } &[data-layout-gap="none"] { --_gap: 0; } &[data-layout-gap="xs"] { --_gap: var(--size-xs); } &[data-layout-gap="s"] { --_gap: var(--size-s); } &[data-layout-gap="m"] { --_gap: var(--size-m); } &[data-layout-gap="l"] { --_gap: var(--size-l); } &[data-layout-gap="xl"] { --_gap: var(--size-xl); } }

Related Elements