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>