SimpleGrid

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

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

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

The grid container adds space between tracks by default (16px), both horizontally and vertically, through spacing and verticalSpacing.

We set the number of columns with cols. It defaults to a single track. The best practice is to adapt the number of columns based on screen size:

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