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
ResponsiveValue<GridAutoColumns<0 | (string & {})>>

autoFlow

Description

Shorthand prop for gridAutoFlow

Type
ResponsiveValue<GridAutoFlow>

autoRows

Description

Shorthand prop for gridAutoRows

Type
ResponsiveValue<GridAutoRows<0 | (string & {})>>

column

Description

Shorthand prop for gridColumn

Type
ResponsiveValue<GridColumn>

columnGap

Description

Shorthand prop for gridColumnGap

Type
ResponsiveValue<string | number | (string & {})>

gap

Description

Shorthand prop for gridGap

Type
ResponsiveValue<string | number | (string & {})>

row

Description

Shorthand prop for gridRow

Type
ResponsiveValue<GridRow>

rowGap

Description

Shorthand prop for gridRowGap

Type
ResponsiveValue<string | number | (string & {})>

templateAreas

Description

Shorthand prop for gridTemplateAreas

Type
ResponsiveValue<GridTemplateAreas>

templateColumns

Description

Shorthand prop for gridTemplateColumns

Type
ResponsiveValue<GridTemplateColumns<0 | (string & {})>>

templateRows

Description

Shorthand prop for gridTemplateRows

Type
ResponsiveValue<GridTemplateRows<0 | (string & {})>>

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

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel