Grid

Used to manage grid layouts

AI TipWant to skip the docs? Use the MCP Server

Usage

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

<Grid>
  <GridItem />
  <GridItem />
</Grid>

Pass colSpan prop to GridItem to span across columns.

In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution

rowSpan=2

colSpan=2

colSpan=4

Prop	Default	Type
`templateColumns`		`SystemStyleObject['gridTemplateColumns'] \| undefined`
`autoFlow`		`SystemStyleObject['gridAutoFlow'] \| undefined`
`autoRows`		`SystemStyleObject['gridAutoRows'] \| undefined`
`autoColumns`		`SystemStyleObject['gridAutoColumns'] \| undefined`
`templateRows`		`SystemStyleObject['gridTemplateRows'] \| undefined`
`templateAreas`		`SystemStyleObject['gridTemplateAreas'] \| undefined`
`column`		`SystemStyleObject['gridColumn'] \| undefined`
`row`		`SystemStyleObject['gridRow'] \| undefined`
`inline`		`boolean \| undefined`
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.