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
ResponsiveValue<GridAutoColumns<0 | (string & {})>>autoFlow
autoFlowDescription
Shorthand prop for gridAutoFlow
Type
ResponsiveValue<GridAutoFlow>autoRows
autoRowsDescription
Shorthand prop for gridAutoRows
Type
ResponsiveValue<GridAutoRows<0 | (string & {})>>column
columnDescription
Shorthand prop for gridColumn
Type
ResponsiveValue<GridColumn>columnGap
columnGapDescription
Shorthand prop for gridColumnGap
Type
ResponsiveValue<string | number | (string & {})>columns
columnsDescription
The number of columns
Type
ResponsiveValue<number>gap
gapDescription
Shorthand prop for gridGap
Type
ResponsiveValue<string | number | (string & {})>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
ResponsiveValue<GridRow>rowGap
rowGapDescription
Shorthand prop for gridRowGap
Type
ResponsiveValue<string | number | (string & {})>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
ResponsiveValue<GridTemplateAreas>templateColumns
templateColumnsDescription
Shorthand prop for gridTemplateColumns
Type
ResponsiveValue<GridTemplateColumns<0 | (string & {})>>templateRows
templateRowsDescription
Shorthand prop for gridTemplateRows
Type
ResponsiveValue<GridTemplateRows<0 | (string & {})>>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
ResponsiveValue<GridAutoColumns<0 | (string & {})>>autoFlow
autoFlowDescription
Shorthand prop for gridAutoFlow
Type
ResponsiveValue<GridAutoFlow>autoRows
autoRowsDescription
Shorthand prop for gridAutoRows
Type
ResponsiveValue<GridAutoRows<0 | (string & {})>>column
columnDescription
Shorthand prop for gridColumn
Type
ResponsiveValue<GridColumn>columnGap
columnGapDescription
Shorthand prop for gridColumnGap
Type
ResponsiveValue<string | number | (string & {})>columns
columnsDescription
The number of columns
Type
ResponsiveValue<number>gap
gapDescription
Shorthand prop for gridGap
Type
ResponsiveValue<string | number | (string & {})>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
ResponsiveValue<GridRow>rowGap
rowGapDescription
Shorthand prop for gridRowGap
Type
ResponsiveValue<string | number | (string & {})>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
ResponsiveValue<GridTemplateAreas>templateColumns
templateColumnsDescription
Shorthand prop for gridTemplateColumns
Type
ResponsiveValue<GridTemplateColumns<0 | (string & {})>>templateRows
templateRowsDescription
Shorthand prop for gridTemplateRows
Type
ResponsiveValue<GridTemplateRows<0 | (string & {})>>