SimpleGrid

SimpleGrid provides a friendly interface to create responsive grid layouts with ease.

AI TipWant to skip the docs? Use the MCP Server

Usage

The SimpleGrid component allows you to create responsive grid layouts with ease.

import { SimpleGrid } from "@chakra-ui/react"

<SimpleGrid>
  <Box />
  <Box />
</SimpleGrid>

Examples

Columns

Specify the number of columns for the grid layout using the columns prop.

Auto-responsive

Make the grid responsive and adjust automatically without passing columns, by using the minChildWidth prop. This uses css grid auto-fit and minmax() internally.

Column Span

Specify the size of the column by using the colSpan prop.

Column 1

Column 2

Row and Column Gap

Pass the rowGap and columnGap props to change the row and column spacing between the grid items.

Separator

Stack