Chakra UI SimpleGrid - Horizon UI

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

Description

Short hand prop for gridArea

Type
SystemProps["gridArea"]

autoColumns

Description

Short hand prop for gridAutoColumns

Type
SystemProps["gridAutoColumns"]

autoFlow

Description

Short hand prop for gridAutoFlow

Type
SystemProps["gridAutoFlow"]

autoRows

Description

Short hand prop for gridAutoRows

Type
SystemProps["gridAutoRows"]

column

Description

Short hand prop for gridColumn

Type
SystemProps["gridColumn"]

columnGap

Description

Short hand prop for gridColumnGap

Type
SystemProps["gridColumnGap"]

columns

Description

The number of columns

Type
number | ResponsiveArray<number> | Partial<Record<string, number>>

gap

Description

Short hand prop for gridGap

Type
SystemProps["gridGap"]

minChildWidth

Description

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

Description

Short hand prop for gridRow

Type
SystemProps["gridRow"]

rowGap

Description

Short hand prop for gridRowGap

Type
SystemProps["gridRowGap"]

spacing

Description

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

Description

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

Description

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

Description

Short hand prop for gridTemplateAreas

Type
SystemProps["gridTemplateAreas"]

templateColumns

Description

Short hand prop for gridTemplateColumns

Type
SystemProps["gridTemplateColumns"]

templateRows

Description

Short hand prop for gridTemplateRows

Type
SystemProps["gridTemplateRows"]

Horizon UI © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License