Import
import { Grid } from 'styled-system/jsx'Usage
Easily create grid layouts with the Grid component.
Loading example...
Col Span
Pass colSpan prop to GridItem to span across columns.
Loading example...
Spanning Columns
In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution
Loading example...
Props
The Grid component accepts the following utility props in addition to style and factory props:
| Prop | Type | Description |
|---|---|---|
| gridTemplateColumns | SystemStyleObject['gridTemplateColumns'] | Defines the columns of the grid. |
| gridTemplateRows | SystemStyleObject['gridTemplateRows'] | Defines the rows of the grid. |
| gap | SystemStyleObject['gap'] | Defines the gap between grid items. |
| colSpan | number | Number of columns the grid item should span. |
| rowSpan | number | Number of rows the grid item should span. |
| columns | number | Number of columns in the grid. |