Layouts
Grid
A grid component.
Grid item placement
Component props
A Grid renders a Box as a child, so it also accepts all Box props.
| Name | Type |
|---|---|
| display | Responsive<"grid" | "inline-grid" | "none"> |
| columns | Responsive<string> |
| rows | Responsive<string> |
| autoFlow | Responsive<"row" | "column" | "dense" | "row-dense" | "column-dense"> |
| justifyContent | Responsive<"center" | "start" | "end" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch"> |
| justifyItems | Responsive<"center" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "stretch" | "left" | "right" | "baseline"> |
| alignContent | Responsive<"center" | "start" | "end" | "flex-start" | "flex-end" | "baseline" | "space-between" | "space-around" | "space-evenly" | "stretch"> |
| alignItems | Responsive<"center" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "stretch" | "baseline"> |
| gap | Responsive<Spacing> |
| gapX | Responsive<Spacing> |
| gapY | Responsive<Spacing> |
| as | string |
| asChild | boolean |