The Grid
component extends the Box
utility component and provides a CSS grid container alongside grid properties.
When to use:
The Grid
component is useful for creating intrinsically responsive layouts.
Edit the code below to see your changes live!
<Grid><GridItem><ExampleBox>Item 1</ExampleBox></GridItem><GridItem><ExampleBox>Item 2</ExampleBox></GridItem><GridItem><ExampleBox>Item 3</ExampleBox></GridItem><GridItem><ExampleBox>Item 4</ExampleBox></GridItem></Grid>
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 |
gridColumnGap | string |
| Sets the size of the gap between grid columns. 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 |
gridRowGap | string |
| Sets the size of the gap between grid rows. Same as the |
gridTemplate | string |
| Shorthand for |
Props ending with * are required
Box Props
Display Props
Margin Props
Padding Props
Do |
---|
Use CSS-Tricks complete guide to grid. |
Don't |
---|
Don’t use Grid when focusing on content flow. Use Flex instead. |
Don't use GridItem if children don't have specific grid properties. |