---
id: simple-grid
category: layout
title: SimpleGrid
package: '@chakra-ui/layout'
description:
SimpleGrid provides a friendly interface to create responsive grid layouts
with ease.
---
## Import
```js
import { SimpleGrid } from '@chakra-ui/react'
```
## Usage
Specifying the number of columns for the grid layout.
```jsx
```
You can also make it responsive by passing array or object values into the
`columns` prop.
```jsx
// Passing `columns={[2, null, 3]}` and `columns={{sm: 2, md: 3}}`
// will have the same effect.
```
### 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.
```jsx
```
### 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.
```jsx
```