Grid

Grid is a layout for managing grid layouts

    Source@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:

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"]

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

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel