A primitive useful for grid layouts. Grid is Box with display: grid and it comes with helpful style shorthand. It renders a div element.


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.

Editable Example

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.

Editable Example

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.

Editable Example


Grid Props#

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


areaSystemProps["gridArea"]Short hand prop for `gridArea`-
autoColumnsSystemProps["gridAutoColumns"]Short hand prop for `gridAutoColumns`-
autoFlowSystemProps["gridAutoFlow"]Short hand prop for `gridAutoFlow`-
autoRowsSystemProps["gridAutoRows"]Short hand prop for `gridAutoRows`-
columnSystemProps["gridColumn"]Short hand prop for `gridColumn`-
columnGapSystemProps["gridColumnGap"]Short hand prop for `gridColumnGap`-
gapSystemProps["gridGap"]Short hand prop for `gridGap`-
rowSystemProps["gridRow"]Short hand prop for `gridRow`-
rowGapSystemProps["gridRowGap"]Short hand prop for `gridRowGap`-
templateAreasSystemProps["gridTemplateAreas"]Short hand prop for `gridTemplateAreas`-
templateColumnsSystemProps["gridTemplateColumns"]Short hand prop for `gridTemplateColumns`-
templateRowsSystemProps["gridTemplateRows"]Short hand prop for `gridTemplateRows`-

GridItem Props#

colEndnumber | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>-
colSpanResponsiveValue<number | "auto">The number of columns the grid item should `span`.-
colStartResponsiveValue<number | "auto">The column number the grid item should start.-
rowEndnumber | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>-
rowSpannumber | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>-
rowStartnumber | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>-