Shorthand prop for gridAutoColumns
SimpleGrid
SimpleGrid provides a friendly interface to create responsive grid layouts with ease.
Props#
SimpleGrid composes Box so you can pass all the Box props and css grid props
with addition of these:
autoColumns
autoColumnsDescription
Type
SystemProps["gridAutoColumns"]autoFlow
autoFlowDescription
Shorthand prop for gridAutoFlow
Type
SystemProps["gridAutoFlow"]autoRows
autoRowsDescription
Shorthand prop for gridAutoRows
Type
SystemProps["gridAutoRows"]column
columnDescription
Shorthand prop for gridColumn
Type
SystemProps["gridColumn"]columns
columnsDescription
The number of columns
Type
ResponsiveValue<number>minChildWidth
minChildWidthDescription
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
rowDescription
Shorthand prop for gridRow
Type
SystemProps["gridRow"]spacing
spacingDescription
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
spacingXDescription
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
spacingYDescription
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
templateAreasDescription
Shorthand prop for gridTemplateAreas
Type
SystemProps["gridTemplateAreas"]templateColumns
templateColumnsDescription
Shorthand prop for gridTemplateColumns
Type
SystemProps["gridTemplateColumns"]templateRows
templateRowsDescription
Shorthand prop for gridTemplateRows
Type
SystemProps["gridTemplateRows"]Props#
SimpleGrid composes Box so you can pass all the Box props and css grid props
with addition of these:
autoColumns
autoColumnsDescription
Shorthand prop for gridAutoColumns
Type
SystemProps["gridAutoColumns"]autoFlow
autoFlowDescription
Shorthand prop for gridAutoFlow
Type
SystemProps["gridAutoFlow"]autoRows
autoRowsDescription
Shorthand prop for gridAutoRows
Type
SystemProps["gridAutoRows"]column
columnDescription
Shorthand prop for gridColumn
Type
SystemProps["gridColumn"]columns
columnsDescription
The number of columns
Type
ResponsiveValue<number>minChildWidth
minChildWidthDescription
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
rowDescription
Shorthand prop for gridRow
Type
SystemProps["gridRow"]spacing
spacingDescription
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
spacingXDescription
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
spacingYDescription
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
templateAreasDescription
Shorthand prop for gridTemplateAreas
Type
SystemProps["gridTemplateAreas"]templateColumns
templateColumnsDescription
Shorthand prop for gridTemplateColumns
Type
SystemProps["gridTemplateColumns"]templateRows
templateRowsDescription
Shorthand prop for gridTemplateRows
Type
SystemProps["gridTemplateRows"]