Auto Grid

A responsive grid that reflows columns based on available width.

Uses repeat(auto-fill, minmax(min, 1fr)) — auto-fill, not auto-fit — so column count adapts without media queries. Complements fixed-column Grid.

Card grids and icon tiles that should fill available width
Dashboard app pickers and catalog layouts
Prefer Grid when you need an exact column count

Default

Responsive card grid that reflows column count from a minimum tile width.

Item 1

Item 2

Item 3

Item 4

Card Grid (270px min)

Dashboard-style tiles at a wider minimum column width for richer card content.

Dashboard

Analytics

Settings

Users

Reports

Billing

Narrow Items (120px min)

Compact icon or label tiles with a tighter minimum column width.

Alpha

Bravo

Charlie

Delta

Echo

Foxtrot

Golf

Hotel

Custom Gap (24px)

Wider grid gap for layouts that need more breathing room between tiles.

Wider spacing

Between items

For breathing room