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 | Values |
|---|---|---|
| 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 |