SimpleGrid

A grid with equal-width tracks, and which expands horizontally (fluid).

We set the number of tracks with cols. It defaults to a single track. Wide screens accommodate multiple tracks, but mobile devices may stick with a single one. As such, it's common to set cols with at least two values:

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

Mantine adds space between tracks by default (16px). We may set it with spacing and verticalSpacing.

earlymorning logo

© 2025 - All rights reserved

SimpleGrid

A grid with equal-width tracks, and which expands horizontally (fluid).

We set the number of tracks with cols. It defaults to a single track. Wide screens accommodate multiple tracks, but mobile devices may stick with a single one. As such, it's common to set cols with at least two values:

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

Mantine adds space between tracks by default (16px). We may set it with spacing and verticalSpacing.