SimpleGrid

Responsive grid where each item takes equal amount of space
Import

Usage

SimpleGrid is a simple flexbox container where each child is treated as a column. Each column takes equal amount of space and unlike Grid component you do not control column span, instead you specify number of columns per row:

1
2
3
4
5
Spacing
xs
sm
md
lg
xl
VerticalSpacing
xs
sm
md
lg
xl
import { SimpleGrid } from '@mantine/core';
function Demo() {
return (
<SimpleGrid cols={3}>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</SimpleGrid>
)
}

Breakpoints

Provide an array to breakpoints prop to define responsive behavior:

  • maxWidth or minWidth – max-width or min-width at which media query will work
  • cols – number of columns per row at given max-width
  • spacing – optional spacing at given max-width, if not provided spacing from component prop will be used instead

Resize browser to see breakpoints behavior:

1
2
3
4
5
import { SimpleGrid } from '@mantine/core';
function Demo() {
return (
<SimpleGrid
cols={4}
spacing="lg"
breakpoints={[
{ maxWidth: 980, cols: 3, spacing: 'md' },
{ maxWidth: 755, cols: 2, spacing: 'sm' },
{ maxWidth: 600, cols: 1, spacing: 'sm' },
]}
>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</SimpleGrid>
)
}

In this example:

  • If screen width is more than 980px then component cols and spacing is used – 4 columns, lg spacing
  • screen width < 980px and > 755px – cols = 3, spacing = sm
  • screen width < 755px and > 600px – cols = 2, spacing = sm
  • screen width < 600px – cols = 1, spacing = sm

You can also use breakpoints from theme to set maxWidth:

1
2
3
4
5
import { SimpleGrid } from '@mantine/core';
function Demo() {
return (
<SimpleGrid
cols={4}
spacing="lg"
breakpoints={[
{ maxWidth: 'md', cols: 3, spacing: 'md' },
{ maxWidth: 'sm', cols: 2, spacing: 'sm' },
{ maxWidth: 'xs', cols: 1, spacing: 'sm' },
]}
>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</SimpleGrid>
)
}

min-width breakpoints

If you prefer a mobile first approach, you can use min-width breakpoints:

import { SimpleGrid } from '@mantine/core';
function Demo() {
return (
<SimpleGrid
breakpoints={[
{ minWidth: 'sm', cols: 2 },
{ minWidth: 'md', cols: 3 },
{ minWidth: 1200, cols: 4 },
]}
>
<div>1</div>
<div>2</div>
<div>3</div>
</SimpleGrid>
);
}

Spacing

You can use either theme.spacing value or number value for spacing in px:

// xl spacing from theme.spacing
<SimpleGrid spacing="xl" />;
// 12px spacing
<SimpleGrid spacing={12} />;

Spacing also works in breakpoints:

// theme.spacing.xl
<SimpleGrid breakpoints={[{ maxWidth: 755, cols: 2, spacing: 'xl' }]} />;
// 12px spacing
<SimpleGrid breakpoints={[{ maxWidth: 755, cols: 2, spacing: 12 }]} />;

Browser support

Simple grid uses CSS Grid Layout, check caniuse to find out information about browser support.

Download more icon variants from https://tabler-icons.io/i/search

SimpleGrid component props

NameTypeDescription
breakpoints
SimpleGridBreakpoint[]
Breakpoints data to change items per row and spacing based on max-width
cols
number
Default amount of columns, used when none of breakpoints can be applied
spacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Spacing between columns, used when none of breakpoints can be applied
verticalSpacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Vertical spacing between columns, used when none of breakpoints can be applied