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.

<SimpleGrid columns={2} gap={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]} gap='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' gap='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>

Edit this page on GitHub

SimpleGrid

Import#

Usage#

Auto-responsive grid#

Changing the spacing for columns and rows#

Props#