SimpleGrid

Usage

SimpleGrid is a responsive grid system with equal width columns. It use CSS grid layout. If you need to set different widths for columns, use Grid component instead.

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>
  )
}

Responsive props

cols, spacing and verticalSpacing props support object notation for responsive values, it works the same way as style props: the object may have base, xs, sm, md, lg and xl key, and values from those keys will be applied according to current viewport width.

In the following example, cols={{ base: 1, sm: 2, lg: 5 }} means:

• 1 column if viewport width is less than sm breakpoint
• 2 columns if viewport width is between sm and lg breakpoints
• 5 columns if viewport width is greater than lg breakpoint

Same logic applies to spacing and verticalSpacing props.

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

function Demo() {
  return (
    <SimpleGrid
      cols={{ base: 1, sm: 2, lg: 5 }}
      spacing={{ base: 10, sm: 'xl' }}
      verticalSpacing={{ base: 'md', sm: 'xl' }}
    >
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </SimpleGrid>
  );
}