Scribd
Upload
10 views5 pages

SimpleGrid Component in Chakra UI

The document provides an overview of the SimpleGrid component in Chakra UI, which facilitates the creation of responsive grid layouts. It explains how to specify the number of columns, make grids responsive using props like minChildWidth, and adjust spacing between grid items. Examples of code usage demonstrate these functionalities effectively.

Uploaded by

Abhilash Alshi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views5 pages

SimpleGrid Component in Chakra UI

The document provides an overview of the SimpleGrid component in Chakra UI, which facilitates the creation of responsive grid layouts. It explains how to specify the number of columns, make grids responsive using props like minChildWidth, and adjust spacing between grid items. Examples of code usage demonstrate these functionalities effectively.

Uploaded by

Abhilash Alshi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

10/31/25, 7:51 PM SimpleGrid - Chakra UI

Build faster with Premium Chakra UI Learn more


Components 💎

SimpleGrid
SimpleGrid provides a friendly interface to create responsive grid layouts with ease.
Source @chakra-ui/layout

Usage Props

Import
import { SimpleGrid } from '@chakra-ui/react' COPY

Usage #
Specifying the number of columns for the grid layout.

[Link] 1/5
10/31/25, 7:51 PM SimpleGrid - Chakra UI

EDITABLE EXAMPLE COPY


<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.

EDITABLE EXAMPLE COPY


// 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>

[Link] 2/5
10/31/25, 7:51 PM SimpleGrid - Chakra UI

</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.

EDITABLE EXAMPLE COPY


<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.

[Link] 3/5
10/31/25, 7:51 PM SimpleGrid - Chakra UI

EDITABLE EXAMPLE COPY


<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

[Link] 4/5
10/31/25, 7:51 PM SimpleGrid - Chakra UI

Proudly made in by Segun Adebayo

Deployed by ▲ Vercel

[Link] 5/5

You might also like