Grid

Flexbox grid system with variable amount of columns
Import

Usage

1
2
3
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid>
<Grid.Col span={4}>1</Grid.Col>
<Grid.Col span={4}>2</Grid.Col>
<Grid.Col span={4}>3</Grid.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 all rows to take 100% of container width:

1
2
3
4
5
Gutter
xs
sm
md
lg
xl
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid grow>
<Grid.Col span={4}>1</Grid.Col>
<Grid.Col span={4}>2</Grid.Col>
<Grid.Col span={4}>3</Grid.Col>
<Grid.Col span={4}>4</Grid.Col>
<Grid.Col span={4}>5</Grid.Col>
</Grid>
);
}

Column offset

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

1
2
3
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid>
<Grid.Col span={3}>1</Grid.Col>
<Grid.Col span={3}>2</Grid.Col>
<Grid.Col span={3} offset={3}>3</Grid.Col>
</Grid>
);
}

Order

Set the order prop on Grid.Col component to change the order of columns:

2
3
1
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid>
<Grid.Col span={3} order={2} orderSm={1} orderLg={3}>2</Grid.Col>
<Grid.Col span={3} order={3} orderSm={1} orderLg={2}>3</Grid.Col>
<Grid.Col span={3} order={1} orderSm={3} orderLg={1}>1</Grid.Col>
</Grid>
);
}

Multiple rows

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

1
2
3
4
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid>
<Grid.Col span={4}>1</Grid.Col>
<Grid.Col span={4}>2</Grid.Col>
<Grid.Col span={4}>3</Grid.Col>
<Grid.Col span={4}>4</Grid.Col>
</Grid>
);
}

Justify and align

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

1
2
3
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid>
<Grid.Col span={3} style={{ minHeight: 80 }}>1</Grid.Col>
<Grid.Col span={3} style={{ minHeight: 120 }}>2</Grid.Col>
<Grid.Col span={3}>3</Grid.Col>
</Grid>
);
}

Responsive columns

Use breakpoint props (xs, sm, md, lg, xl) to make columns respond to viewport changes. You can configure breakpoint values with MantineProvider.

In this example up to md there will be 1 column, from md to lg there will be 2 columns and from lg and up, there will be 4 columns:

1
2
3
4
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid>
<Grid.Col md={6} lg={3}>1</Grid.Col>
<Grid.Col md={6} lg={3}>2</Grid.Col>
<Grid.Col md={6} lg={3}>3</Grid.Col>
<Grid.Col md={6} lg={3}>4</Grid.Col>
</Grid>
);
}

Auto sized columns

All columns in a row with span or a breakpoint of auto will have equal size, growing as much as they can to fill the row.

In this example, the second column takes up 50% of the row while the other two columns automatically resize to fill the remaining space:

1
2
3
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid>
<Grid.Col span="auto">span=auto</Grid.Col>
<Grid.Col span={6}>span=6</Grid.Col>
<Grid.Col span="auto">span=auto</Grid.Col>
</Grid>
);
}

Fit column content

If you set span or a breakpoint to content, the column's size will automatically adjust to match the width of its content:

fit content
2
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid>
<Grid.Col span="content">fit content</Col>
<Grid.Col span={6}>2</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):

1
2
3
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid columns={24}>
<Grid.Col span={12}>1</Grid.Col>
<Grid.Col span={6}>2</Grid.Col>
<Grid.Col span={6}>3</Grid.Col>
</Grid>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Grid component props

NameTypeDescription
align
AlignContent
Set grid align-content property
children *
ReactNode
<Col /> components only
columns
number
Amount of columns in each row
grow
boolean
Should columns in the last row take 100% of grid width
gutter
number | "xs" | "sm" | "md" | "lg" | "xl"
Spacing between columns predefined value from theme.spacing or number for gutter in px
justify
JustifyContent
Set grid justify-content property

Grid.Col component props

NameTypeDescription
lg
ColSpan
Col span at (min-width: theme.breakpoints.lg)
md
ColSpan
Col span at (min-width: theme.breakpoints.md)
offset
number
Column left offset
offsetLg
number
Column left offset at (min-width: theme.breakpoints.lg)
offsetMd
number
Column left offset at (min-width: theme.breakpoints.md)
offsetSm
number
Column left offset at (min-width: theme.breakpoints.sm)
offsetXl
number
Column left offset at (min-width: theme.breakpoints.xl)
offsetXs
number
Column left offset at (min-width: theme.breakpoints.xs)
order
Order
Default col order
orderLg
Order
Col order at (min-width: theme.breakpoints.lg)
orderMd
Order
Col order at (min-width: theme.breakpoints.md)
orderSm
Order
Col order at (min-width: theme.breakpoints.sm)
orderXl
Order
Col order at (min-width: theme.breakpoints.xl)
orderXs
Order
Col order at (min-width: theme.breakpoints.xs)
sm
ColSpan
Col span at (min-width: theme.breakpoints.sm)
span
ColSpan
Default col span
xl
ColSpan
Col span at (min-width: theme.breakpoints.xl)
xs
ColSpan
Col span at (min-width: theme.breakpoints.xs)