SimpleGrid

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

import { SimpleGrid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <SimpleGrid columns={2} gap="40px">
      <DecorativeBox height="20" />
      <DecorativeBox height="20" />
      <DecorativeBox height="20" />
      <DecorativeBox height="20" />
    </SimpleGrid>
  )
}

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.

import { SimpleGrid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

export const SimpleGridWithColumns = () => (
  <SimpleGrid columns={[2, null, 3]} gap="40px">
    <DecorativeBox height="20" />
    <DecorativeBox height="20" />
    <DecorativeBox height="20" />
    <DecorativeBox height="20" />
    <DecorativeBox height="20" />
  </SimpleGrid>
)

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.

import { SimpleGrid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

export const SimpleGridWithAutofit = () => (
  <SimpleGrid minChildWidth="sm" gap="40px">
    <DecorativeBox height="20" />
    <DecorativeBox height="20" />
    <DecorativeBox height="20" />
    <DecorativeBox height="20" />
    <DecorativeBox height="20" />
  </SimpleGrid>
)

Column Span

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

Column 1

Column 2

import { GridItem, SimpleGrid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

export const SimpleGridWithColSpan = () => (
  <SimpleGrid columns={{ base: 2, md: 4 }} gap={{ base: "24px", md: "40px" }}>
    <GridItem colSpan={{ base: 1, md: 3 }}>
      <DecorativeBox height="20">Column 1</DecorativeBox>
    </GridItem>
    <GridItem colSpan={{ base: 1, md: 1 }}>
      <DecorativeBox height="20">Column 2</DecorativeBox>
    </GridItem>
  </SimpleGrid>
)

Row and Column Gap

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

import { SimpleGrid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <SimpleGrid columns={2} columnGap="2" rowGap="4">
      <DecorativeBox height="20" />
      <DecorativeBox height="20" />
      <DecorativeBox height="20" />
      <DecorativeBox height="20" />
    </SimpleGrid>
  )
}

Group

Stack