Shorthand prop for gridArea
@deprecated Use GridItem
with the area
prop instead. Will be removed in a future
version.
SimpleGrid
If you're like me, you probably tend to check the MDN docs for anything CSS grid.
SimpleGrid provides a friendly interface to create responsive grid layouts with
ease. It renders a div
element with display: grid
.
Import#
import { SimpleGrid } from '@chakra-ui/react'
Usage#
Specifying the number of columns for the grid layout.
<SimpleGrid columns={2} spacing={10}><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box></SimpleGrid>
You can also make it responsive by passing array or object values into the
columns
prop.
// Passing `columns={[2, null, 3]}` and `columns={{sm: 2, md: 3}}`// will have the same effect.<SimpleGrid columns={[2, null, 3]} spacing='40px'><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box></SimpleGrid>
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.
<SimpleGrid minChildWidth='120px' spacing='40px'><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box></SimpleGrid>
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.
<SimpleGrid columns={2} spacingX='40px' spacingY='20px'><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box><Box bg='tomato' height='80px'></Box></SimpleGrid>
Props#
SimpleGrid composes Box
so you can pass all the Box
props and css grid props
with addition of these:
area
area
SystemProps["gridArea"]
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<number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | ... 52 more ... | "-webkit-min-content">>
row
row
Shorthand prop for gridRow
SystemProps["gridRow"]
spacing
spacing
The gap between the grid items
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
spacingX
The column gap between the grid items
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
spacingY
The row gap between the grid items
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
templateAreas
Shorthand prop for gridTemplateAreas
SystemProps["gridTemplateAreas"]
templateColumns
templateColumns
Shorthand prop for gridTemplateColumns
SystemProps["gridTemplateColumns"]
templateRows
templateRows
Shorthand prop for gridTemplateRows
SystemProps["gridTemplateRows"]