Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Grid

Used to manage grid layouts

SourceStorybook

Usage

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

Examples

Col Span

Pass colSpan prop to GridItem to span across columns.

Spanning 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=2
colSpan=4

Props

PropDefaultType
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

Previous

Float

Next

Group