SimpleGrid

SimpleGrid provides a friendly interface to create responsive grid layouts with ease.

    Source@chakra-ui/layout

Props#

SimpleGrid composes Box so you can pass all the Box props and css grid props with addition of these:

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

columns

Description

The number of columns

Type
ResponsiveValue<number>

minChildWidth

Description

The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.

Type
ResponsiveValue<Union<number | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | ... 52 more ... | "-webkit-min-content">>

row

Description

Shorthand prop for gridRow

Type
SystemProps["gridRow"]

spacing

Description

The gap between the grid items

Type
ResponsiveValue<Union<number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | ... 51 more ... | "-3.5">>

spacingX

Description

The column gap between the grid items

Type
ResponsiveValue<Union<number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | ... 51 more ... | "-3.5">>

spacingY

Description

The row gap between the grid items

Type
ResponsiveValue<Union<number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | ... 51 more ... | "-3.5">>

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"]
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel