v0.27.0
The Grid component is useful for creating intrinsicly responsive layouts. Grid Design Guidelines.
Edit the code below to see your changes live!
Prop Name | Type | Default | Description |
---|---|---|---|
gridAreas | string |
| Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property of a grid item. Same as the |
gridAutoColumns | string |
| Specifies the size of any auto-generated column grid tracks. Same as the |
gridAutoFlow | row | column | dense | row dense | column dense | inherit | initial | unset |
| Controls how auto placement of grid items work. Same as the |
gridAutoRows | string |
| Specifies the size of any auto-generated row grid tracks. Same as the |
gridColumns | string |
| Defines the columns of the grid with a space-separated list of values. Same as the |
gridGap | string |
| Controls the spacing between grid items. Same as the |
gridRows | string |
| Defines the rows of the grid with a space-separated list of values. Same as the |
gridTemplate | string |
| Shorthand for |
Props ending with * are required
Prop Name | Type | Default | Description |
---|---|---|---|
gridArea | string |
| Gives a grid item and area defined via |
gridColumn | string |
| Shorthand for |
gridColumnEnd | string |
| Determines a grid item's location within the grid by referring to specific grid lines. Same as the |
gridColumnStart | string |
| Determines a grid item's location within the grid by referring to specific grid lines. Same as the |
gridRow | string |
| Shorthand for |
gridRowEnd | string |
| Determines a grid item's location within the grid by referring to specific grid lines. Same as the |
gridRowStart | string |
| Determines a grid item's location within the grid by referring to specific grid lines. Same as the |
Props ending with * are required
Box Props
Display Props
Margin Props
Padding Props
Grid allows you to create custom layouts using combinations of gridTemplate
and gridArea
props.
Edit the code below to see your changes live!
You can use the gridColumns
prop to create columned layouts.
Edit the code below to see your changes live!