Grid

Grid is a layout for managing grid layouts

Import

import { Grid, GridItem } from "@chakra-ui/react";

Grid: The main wrapper with display: grid.
GridItem: Used as a child of Grid to control the span, and start positions within the grid.

Template columns

Here's an example of using grid template columns with the grid component, and applying a gap or space between the grid items.

<Grid templateColumns="repeat(5, 1fr)" gap={6}>
  <GridItem w="100%" h="10" bg="blue.500" />
  <GridItem w="100%" h="10" bg="blue.500" />
  <GridItem w="100%" h="10" bg="blue.500" />
  <GridItem w="100%" h="10" bg="blue.500" />
  <GridItem w="100%" h="10" bg="blue.500" />
</Grid>

<Grid templateColumns="repeat(5, 1fr)" gap={6}>
  <GridItem w="100%" h="10" bg="blue.500" />
  <GridItem w="100%" h="10" bg="blue.500" />
  <GridItem w="100%" h="10" bg="blue.500" />
  <GridItem w="100%" h="10" bg="blue.500" />
  <GridItem w="100%" h="10" bg="blue.500" />
</Grid>

Spanning columns

In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the colSpan prop to the GridItem component to span across columns and also pass the rowSpan component to span across rows. You also need to specify the templateColumns and templateRows.

<Grid
  h="200px"
  templateRows="repeat(2, 1fr)"
  templateColumns="repeat(5, 1fr)"
  gap={4}
>
  <GridItem rowSpan={2} colSpan={1} bg="tomato" />
  <GridItem colSpan={2} bg="papayawhip" />
  <GridItem colSpan={2} bg="papayawhip" />
  <GridItem colSpan={4} bg="tomato" />
</Grid>

<Grid
  h="200px"
  templateRows="repeat(2, 1fr)"
  templateColumns="repeat(5, 1fr)"
  gap={4}
>
  <GridItem rowSpan={2} colSpan={1} bg="tomato" />
  <GridItem colSpan={2} bg="papayawhip" />
  <GridItem colSpan={2} bg="papayawhip" />
  <GridItem colSpan={4} bg="tomato" />
</Grid>

Starting and ending lines

Pass the colStart and colEnd prop to GridItem component to make an element start or end at the nth grid position.

<Grid templateColumns="repeat(5, 1fr)" gap={4}>
  <GridItem colSpan={2} h="10" bg="tomato" />
  <GridItem colStart={4} colEnd={6} h="10" bg="papayawhip" />
</Grid>

<Grid templateColumns="repeat(5, 1fr)" gap={4}>
  <GridItem colSpan={2} h="10" bg="tomato" />
  <GridItem colStart={4} colEnd={6} h="10" bg="papayawhip" />
</Grid>

Template areas

The templateAreas prop specifies areas within the grid layout. Use template literals to name the area. Now you can reference the area by passing area prop in the <GridItem /> component.

<Grid
  templateAreas={`"header header"
                  "nav main"
                  "nav footer"`}
  gridTemplateRows={"50px 1fr 30px"}
  gridTemplateColumns={"150px 1fr"}
  h="200px"
  gap="1"
  color="blackAlpha.700"
  fontWeight="bold"
>
  <GridItem pl="2" bg="orange.300" area={"header"}>
    Header
  </GridItem>
  <GridItem pl="2" bg="pink.300" area={"nav"}>
    Nav
  </GridItem>
  <GridItem pl="2" bg="green.300" area={"main"}>
    Main
  </GridItem>
  <GridItem pl="2" bg="blue.300" area={"footer"}>
    Footer
  </GridItem>
</Grid>

<Grid
  templateAreas={`"header header"
                  "nav main"
                  "nav footer"`}
  gridTemplateRows={"50px 1fr 30px"}
  gridTemplateColumns={"150px 1fr"}
  h="200px"
  gap="1"
  color="blackAlpha.700"
  fontWeight="bold"
>
  <GridItem pl="2" bg="orange.300" area={"header"}>
    Header
  </GridItem>
  <GridItem pl="2" bg="pink.300" area={"nav"}>
    Nav
  </GridItem>
  <GridItem pl="2" bg="green.300" area={"main"}>
    Main
  </GridItem>
  <GridItem pl="2" bg="blue.300" area={"footer"}>
    Footer
  </GridItem>
</Grid>

Props

Grid Props

Grid composes Box so you can pass all the Box prop, and these shorthand prop to save you some time:

`autoColumns`

Description

Shorthand prop for gridAutoColumns

Type

SystemProps["gridAutoColumns"]

`autoFlow`

Description

Shorthand prop for gridAutoFlow

Type

SystemProps["gridAutoFlow"]

`autoRows`

Description

Shorthand prop for gridAutoRows

Type

SystemProps["gridAutoRows"]

`column`

Description

Shorthand prop for gridColumn

Type

SystemProps["gridColumn"]

`row`

Description

Shorthand prop for gridRow

Type

SystemProps["gridRow"]

`templateAreas`

Description

Shorthand prop for gridTemplateAreas

Type

SystemProps["gridTemplateAreas"]

`templateColumns`

Description

Shorthand prop for gridTemplateColumns

Type

SystemProps["gridTemplateColumns"]

`templateRows`

Description

Shorthand prop for gridTemplateRows

Type

SystemProps["gridTemplateRows"]

GridItem Props

`area`

Description

Shorthand prop for gridArea

Type

SystemProps["gridArea"]