SimpleGrid

If you're like me, you probably tend to check the MDN docs for anything CSS grid.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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>

Editable Example

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>

Editable Example

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>

Editable Example

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>

Editable Example

Props#

SimpleGrid composes Box so you can pass all the Box props and css grid props with addition of these:

Name	Type	Description	Default
area	`SystemProps["gridArea"]`	Short hand prop for `gridArea`	-
autoColumns	`SystemProps["gridAutoColumns"]`	Short hand prop for `gridAutoColumns`	-
autoFlow	`SystemProps["gridAutoFlow"]`	Short hand prop for `gridAutoFlow`	-
autoRows	`SystemProps["gridAutoRows"]`	Short hand prop for `gridAutoRows`	-
column	`SystemProps["gridColumn"]`	Short hand prop for `gridColumn`	-
columnGap	`SystemProps["gridColumnGap"]`	Short hand prop for `gridColumnGap`	-
columns	`number \| ResponsiveArray<number> \| Partial<Record<string, number>>`	The number of columns	-
gap	`SystemProps["gridGap"]`	Short hand prop for `gridGap`	-
minChildWidth	`number \| "px" \| (string & {}) \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "unset" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| ... 47 more ...`	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.	-
row	`SystemProps["gridRow"]`	Short hand prop for `gridRow`	-
rowGap	`SystemProps["gridRowGap"]`	Short hand prop for `gridRowGap`	-
spacing	`number \| "px" \| (string & {}) \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "unset" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| ... 38 more ...`	The gap between the grid items	-
spacingX	`number \| "px" \| (string & {}) \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "unset" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| ... 38 more ...`	The column gap between the grid items	-
spacingY	`number \| "px" \| (string & {}) \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "unset" \| "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| ... 38 more ...`	The row gap between the grid items	-
templateAreas	`SystemProps["gridTemplateAreas"]`	Short hand prop for `gridTemplateAreas`	-
templateColumns	`SystemProps["gridTemplateColumns"]`	Short hand prop for `gridTemplateColumns`	-
templateRows	`SystemProps["gridTemplateRows"]`	Short hand prop for `gridTemplateRows`	-

Edit this page