SimpleGrid
SimpleGrid provides a friendly interface to create responsive grid layouts with ease.
Import
import { SimpleGrid } from "@chakra-ui/react";
Usage
Specifying the number of columns for the grid layout.
You can also make it responsive by passing array or object values into the
columns
prop.
Auto-responsive grid
To make the grid responsive and adjust automatically without passing columns
,
simply pass the minChildWidth
prop to specify the min-width
a child should
have before adjusting the layout.
This uses css grid auto-fit
and minmax()
internally.
Changing the spacing for columns and rows
Simply pass the spacing
prop to change the row and column spacing between the
grid items. SimpleGrid
also allows you pass spacingX
and spacingY
to
define the space between columns and rows respectively.
Props
SimpleGrid composes Box
so you can pass all the Box
props and css grid props
with addition of these:
autoColumns
autoColumns
Shorthand prop for gridAutoColumns
SystemProps["gridAutoColumns"]
autoFlow
autoFlow
Shorthand prop for gridAutoFlow
SystemProps["gridAutoFlow"]
autoRows
autoRows
Shorthand prop for gridAutoRows
SystemProps["gridAutoRows"]
column
column
Shorthand prop for gridColumn
SystemProps["gridColumn"]
columns
columns
The number of columns
ResponsiveValue<number>
minChildWidth
minChildWidth
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.
ResponsiveValue<Union<string | number | (string & {})>>
row
row
Shorthand prop for gridRow
SystemProps["gridRow"]
spacing
spacing
The gap between the grid items
ResponsiveValue<Union<string | number | (string & {})>>
spacingX
spacingX
The column gap between the grid items
ResponsiveValue<Union<string | number | (string & {})>>
spacingY
spacingY
The row gap between the grid items
ResponsiveValue<Union<string | number | (string & {})>>
templateAreas
templateAreas
Shorthand prop for gridTemplateAreas
SystemProps["gridTemplateAreas"]
templateColumns
templateColumns
Shorthand prop for gridTemplateColumns
SystemProps["gridTemplateColumns"]
templateRows
templateRows
Shorthand prop for gridTemplateRows
SystemProps["gridTemplateRows"]