SimpleGrid

Usage

SimpleGrid is a simple css grid 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:

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:

import { SimpleGrid } from '@mantine/core';

function Demo() {
  return (
    <SimpleGrid
      cols={4}
      spacing="lg"
      breakpoints={[
        { maxWidth: '62rem', cols: 3, spacing: 'md' },
        { maxWidth: '48rem', cols: 2, spacing: 'sm' },
        { maxWidth: '36rem', 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 < 62em and > 48em – cols = 3, spacing = md
• screen width < 48em and > 36em – cols = 2, spacing = sm
• screen width < 36em – cols = 1, spacing = sm

You can also use breakpoints from theme to set maxWidth:

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" />;

// 1rem spacing
<SimpleGrid spacing={16} />;

Spacing also works in breakpoints:

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

// 1rem spacing
<SimpleGrid breakpoints={[{ maxWidth: 'md', cols: 2, spacing: 16 }]} />;

Browser support

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