SimpleGrid

Set up a column layout with a given number of equal-width columns.

The grid container spans the whole line and the columns together span the whole container.

The grid container adds space between tracks by default (16px) (both horizontal and vertical spacing aka spacing and verticalSpacing).

We set the number of columns with cols. It defaults to a single track. Best Practice: adapt the column count based on screen size, by providing at least two values.

<SimpleGrid cols={3}>
  {/* items */}
</SimpleGrid>

<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }}>
  {/* items */}
</SimpleGrid>