SimpleGrid

Responsive grid where each item takes equal amount of space

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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:

Cols

Spacing

<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:

<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 > 680px – cols = 2, spacing = sm
screen width < 680px – cols = 1, spacing = sm

You can also use breakpoints from theme to set maxWidth:

<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:

<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 }]} />;