Grid

Usage

Grid component provides simple grid system based on flexbox container:

<Grid>
  <Col span={4}>1</Col>
  <Col span={4}>2</Col>
  <Col span={4}>3</Col>
</Grid>

Gutter

Customize spacing between columns with gutter prop on Grid component. Use xs, sm, md, lg, xl values to set spacing from theme.spacing or number to set spacing in px:

<Grid gutter="xl" /> // -> theme.spacing.xl
<Grid gutter={40} /> // -> 40px

Grow

Set grow prop on Grid component to force last row take 100% of container width:

<Grid grow>
  <Col span={4}>1</Col>
  <Col span={4}>2</Col>
  <Col span={4}>3</Col>
  <Col span={4}>4</Col>
  <Col span={4}>5</Col>
</Grid>

Column offset

Set offset prop on Col component to create gaps in grid. offset adds left margin to target column and has the same units as span:

<Grid>
  <Col span={3}>1</Col>
  <Col span={3}>2</Col>
  <Col span={3} offset={3}>3</Col>
</Grid>

Multiple rows

Once children columns span and offset sum exceeds columns prop (defaults to 12), columns are placed on next row:

<Grid>
  <Col span={4}>1</Col>
  <Col span={4}>2</Col>
  <Col span={4}>3</Col>
  <Col span={4}>4</Col>
</Grid>

Justify and align

Since grid is a flex container, you can control justify-content and align-items properties:

<Grid>
  <Col span={3} style={{ minHeight: 80 }}>1</Col>
  <Col span={3} style={{ minHeight: 120 }}>2</Col>
  <Col span={3}>3</Col>
</Grid>

Responsive columns

Use use-media-query hook to make columns respond to viewport changes. In this example for screens larger that 755px 3 columns will be shown and 1 column for everything less:

import React from 'react';
import { Grid, Col } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';

function Demo() {
  const isMobile = useMediaQuery('(max-width: 755px)');
  const span = isMobile ? 12 : 4;

  return (
    <Grid>
      <Col span={span}>1</Col>
      <Col span={span}>2</Col>
      <Col span={span}>3</Col>
    </Grid>
  );
}

Change columns count

By default grid uses 12 columns layout, you can change it by setting columns prop on Grid component. Note that in this case columns span and offset will be calculated relative to this value.

In this example first column takes 50% with 12 span (12/24), second and third take 25% (6/24):

<Grid columns={24}>
  <Col span={12}>1</Col>
  <Col span={6}>2</Col>
  <Col span={6}>3</Col>
</Grid>

Wrap Col component

Col component depends on context props from Grid component. If you want to enhance it with additional logic – pass all props to child Col:

// Example Col component wrapper, used in all demos
import React from 'react';
import { Col, Text, useMantineTheme } from '@mantine/core';

function ColWrapper(props: React.ComponentProps<typeof Col>) {
  const theme = useMantineTheme();
  const background = theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.blue[0];

  return (
    <Col {...props} style={{ background, padding: theme.spacing.md, ...props.style }}>
      <Text
        color={theme.colorScheme === 'dark' ? 'gray' : 'blue'}
        size="xl"
        weight={700}
        align="center"
      >
        {props.children}
      </Text>
    </Col>
  );
}

// Later
<Grid>
  <ColWrapper span={4}>1</ColWrapper>
  <ColWrapper span={4}>2</ColWrapper>
  <ColWrapper span={4}>3</ColWrapper>
</Grid>;