SimpleGrid

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

Source: packages/chakra-ui-solid/src/components/simple-gridChakra UI ↗

import { SimpleGrid } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function SimpleGridBasic() {
  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-solid";

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

Examples

Columns

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

import { SimpleGrid } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function SimpleGridWithColumns() {
  return (
    <SimpleGrid columns={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-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function SimpleGridWithAutofit() {
  return (
    <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-solid";
import { DecorativeBox } from "../components/decorative-box";

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

columns and colSpan take a plain value here, where Chakra’s take a responsive one: columns={[2, null, 3]} and colSpan={{ base: 1, md: 3 }} are type errors. Both compute a track list, which is an arbitrary string and therefore rides an inline CSS custom property — and an inline style has no breakpoints. The gap props are ordinary style props and stay conditional, which is why the example above still varies its gap by breakpoint.

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-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function SimpleGridWithRowAndColGap() {
  return (
    <SimpleGrid columns={2} columnGap="2" rowGap="4">
      <DecorativeBox height="20" />
      <DecorativeBox height="20" />
      <DecorativeBox height="20" />
      <DecorativeBox height="20" />
    </SimpleGrid>
  );
}