Grid

Overview

The Grid component extends the Box utility component and provides a CSS grid container alongside grid properties.

When to use:

  • Use with two-dimensional layouts (columns and rows).
  • When you care about the exact positioning of elements.
  • Used on complex layouts.

Implementation

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>

Props

Prop name
Type
Default
Description
gridAreasstring

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 grid-template-areas CSS property.

gridAutoColumnsstring

Specifies the size of any auto-generated column grid tracks. Same as the grid-auto-columns CSS property.

gridAutoFlowrow | column | dense | row dense | column dense | inherit | initial | unset

Controls how auto placement of grid items work. Same as the grid-auto-flow CSS property.

gridAutoRowsstring

Specifies the size of any auto-generated row grid tracks. Same as the grid-auto-rows CSS property.

gridColumnsstring

Defines the columns of the grid with a space-separated list of values. Same as the grid-template-columns CSS property.

gridColumnGapstring

Sets the size of the gap between grid columns. Same as the column-gap CSS property.

gridGapstring

Controls the spacing between grid items. Same as the gap CSS property.

gridRowsstring

Defines the rows of the grid with a space-separated list of values. Same as the grid-template-rows CSS property.

gridRowGapstring

Sets the size of the gap between grid rows. Same as the row-gap CSS property.

gridTemplatestring

Shorthand for grid-template-columns, grid-template-rows, and grid-template-areas. Same as the grid-template CSS property.

Props ending with * are required

Inherited

Expand

Box Props

Expand

Display Props

Expand

Margin Props

Expand

Padding Props

Do's and Don'ts

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.