Grid
The collection arranger — uniform tiles that wrap and reflow their column count with the container width, no breakpoints. A peer of Stack.
Each example measures itself, so its gutters are to scale rather than to the page's. The arrangements are exact.
| Prop | Description | Default | Control |
|---|---|---|---|
| as | element to render. ul by default, wrapping each child in an li; ol when order matters; div when it is not a collectionuloldiv | ul |
|
| min | the narrowest a column may be; as many columns as fit, then wrap. Any CSS length; a bare number is px | 16rem | |
| max | the most columns allowed. Omit (0 here) for no limit. In code it can change by breakpoint: { base: 1, sm: 3 } | 0 | |
| gap | space between items, a spacing step00-250-5123468 | 4 |
|
| gap | component for a fixed gap, layout for one that grows with the Sectioncomponentlayout | component | |
| ratio | a fixed aspect ratio for every cell, such as 16:9. Blank keeps each item's natural height | ||
| justify | where each item sits across its cell. Default stretch fills the columnstretchstartcenterend | stretch |
|
| align | where each item sits down its cell. Default stretch makes every item in a row the same heightstretchstartcenterend | stretch |
|
| stretch | when there are fewer items than columns, they widen to fill the row. Off leaves the spare columns empty | true |