Skip to Content

Build faster with Premium Chakra UI Components 💎

Grid

Grid is a layout for managing grid layouts

@chakra-ui/layout

Props#

Grid Props#

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

GridItem Props#

`area`

Description

Shorthand prop for gridArea

Type

ResponsiveValue<GridArea>

`colEnd`

Type

ResponsiveValue<number | "auto">

`colSpan`

Description

The number of columns the grid item should span.

Type

ResponsiveValue<number | "auto">

`colStart`

Description

The column number the grid item should start.

Type

ResponsiveValue<number | "auto">

`rowEnd`

Type

ResponsiveValue<number | "auto">

`rowSpan`

Type

ResponsiveValue<number | "auto">

`rowStart`

Type

ResponsiveValue<number | "auto">

Edit this page on GitHub