Layout
Grid
A CSS Grid layout component for creating two-dimensional layouts with rows and columns. Ideal for building responsive page layouts, card grids, dashboards, and any design requiring precise control over both horizontal and vertical alignment.
Responsive columns#
Use responsive objects to change the grid layout at different breakpoints.
Custom templates#
For complex layouts, pass a custom CSS grid-template string.
Responsive custom templates#
Custom CSS templates can also be responsive by passing an object with breakpoint keys.
Grid item placement#
Component props#
Grid extends Box and accepts all Box props.
| Name | Type | Description |
|---|---|---|
| display | Responsive<GridDisplay> | "grid" | "inline-grid" | "none" |
| columns | Responsive<GridColumns | string> | "1"-"12" | "none" | "subgrid" | custom CSS template |
| rows | Responsive<GridRows | string> | "1"-"12" | "none" | "subgrid" | custom CSS template |
| autoFlow | Responsive<GridAutoFlow> | "row" | "column" | "dense" | "row-dense" | "column-dense" |
| justifyContent | Responsive<JustifyContent> | "center" | "start" | "end" | "space-between" | "space-around" | ... |
| justifyItems | Responsive<JustifyItems> | "center" | "start" | "end" | "stretch" | "baseline" | ... |
| alignContent | Responsive<AlignContent> | "center" | "start" | "end" | "space-between" | "stretch" | ... |
| alignItems | Responsive<AlignItems> | "center" | "start" | "end" | "stretch" | "baseline" | ... |
| gap | Responsive<Gap> | true | Spacing scale |
| gapX | Responsive<Gap> | true | Spacing scale |
| gapY | Responsive<Gap> | true | Spacing scale |