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