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<string | number | (string & {})>row
rowDescription
Shorthand prop for gridRow
Type
SystemProps["gridRow"]spacing
spacingDescription
The gap between the grid items
Type
ResponsiveValue<string | number | (string & {})>spacingX
spacingXDescription
The column gap between the grid items
Type
ResponsiveValue<string | number | (string & {})>spacingY
spacingYDescription
The row gap between the grid items
Type
ResponsiveValue<string | number | (string & {})>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<string | number | (string & {})>row
rowDescription
Shorthand prop for gridRow
Type
SystemProps["gridRow"]spacing
spacingDescription
The gap between the grid items
Type
ResponsiveValue<string | number | (string & {})>spacingX
spacingXDescription
The column gap between the grid items
Type
ResponsiveValue<string | number | (string & {})>spacingY
spacingYDescription
The row gap between the grid items
Type
ResponsiveValue<string | number | (string & {})>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"]