Short hand prop for gridArea
ChatGPT UI SimpleGrid - Horizon AI Template
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>
<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>
// 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>
<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>
<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
areaDescription
Type
SystemProps["gridArea"]autoColumns
autoColumnsDescription
Short hand prop for gridAutoColumns
Type
SystemProps["gridAutoColumns"]autoFlow
autoFlowDescription
Short hand prop for gridAutoFlow
Type
SystemProps["gridAutoFlow"]autoRows
autoRowsDescription
Short hand prop for gridAutoRows
Type
SystemProps["gridAutoRows"]column
columnDescription
Short hand prop for gridColumn
Type
SystemProps["gridColumn"]columnGap
columnGapDescription
Short hand prop for gridColumnGap
Type
SystemProps["gridColumnGap"]columns
columnsDescription
The number of columns
Type
number | ResponsiveArray<number> | Partial<Record<string, number>>gap
gapDescription
Short hand prop for gridGap
Type
SystemProps["gridGap"]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
number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | ... 50 more ...row
rowDescription
Short hand prop for gridRow
Type
SystemProps["gridRow"]rowGap
rowGapDescription
Short hand prop for gridRowGap
Type
SystemProps["gridRowGap"]spacing
spacingDescription
The gap between the grid items
Type
number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | ... 53 more ...spacingX
spacingXDescription
The column gap between the grid items
Type
number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | ... 53 more ...spacingY
spacingYDescription
The row gap between the grid items
Type
number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | ... 53 more ...templateAreas
templateAreasDescription
Short hand prop for gridTemplateAreas
Type
SystemProps["gridTemplateAreas"]templateColumns
templateColumnsDescription
Short hand prop for gridTemplateColumns
Type
SystemProps["gridTemplateColumns"]templateRows
templateRowsDescription
Short hand prop for gridTemplateRows
Type
SystemProps["gridTemplateRows"]