Grid
A simple grid layout component that provides a convenient way to create grid layouts with various alignment and spacing options. Note that this component is not meant for complex grid layouts.
Most layout controls are boolean toggles. When you omit them, Grid falls back to CSS defaults such as grid, row auto-flow, stretch, and the theme s gap.
Item 1
Item 2
Item 3
Wide
Narrow
Narrow
Top Left
Top Right
Bottom Left
Bottom Right
Wide
2
Tall
4
5
Props
The idea is that you control the component by using boolean props. This allows you to define layouts quickly.
| Name | Default | Type |
|---|---|---|
inline | false | boolean Makes the grid container inline |
gap | s | xxs xs s m l xl xxl xxxl number Gap between grid items (theme spacing token or custom unit value) |
rows | — | number string Number of rows or custom grid template rows |
columns | — | number string Number of columns or custom grid template columns |
center | false | boolean Centers items on both axes |
x-start | stretch | boolean Aligns items to the start on the inline axis |
x-end | false | boolean Aligns items to the end on the inline axis |
x-center | false | boolean Centers items on the inline axis |
x-stretch | stretch | boolean Stretches items across the inline axis |
y-start | start | boolean Aligns items to the start on the block axis |
y-end | false | boolean Aligns items to the end on the block axis |
y-center | false | boolean Centers items on the block axis |
y-baseline | false | boolean Aligns items along their baselines |
y-stretch | stretch | boolean Stretches items across the block axis |
auto-flow-row | row | boolean Auto-places grid items by rows |
auto-flow-column | false | boolean Auto-places grid items by columns |
auto-flow-dense | false | boolean Enables dense auto-placement packing |
expand | false | boolean Makes the grid container expand to full width |
Slots
| Name | Accepts | Description |
|---|---|---|
default | any | The grid items to be laid out |