Grid

Flexbox grid system with variable amount of columns

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

import { Grid } from '@asuikit/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

Set gutter, gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props to Grid component to control spacing between columns:

import { Grid } from '@asuikit/core';

function Demo() {
  return (
    <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
      <Grid.Col span={4}>1</Grid.Col>
      <Grid.Col span={4}>2</Grid.Col>
      <Grid.Col span={4}>3</Grid.Col>
    </Grid>
  );
}

Grow

Set grow prop on Grid component to force all rows to take 100% of container width:

Grow

Gutter

import { Grid } from '@asuikit/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:

import { Grid } from '@asuikit/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:

import { Grid } from '@asuikit/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:

import { Grid } from '@asuikit/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:

Justify

Align

import { Grid, rem } from '@asuikit/core';

function Demo() {
  return (
    <Grid>
      <Grid.Col span={3} style={{ minHeight: rem(80) }}>1</Grid.Col>
      <Grid.Col span={3} style={{ minHeight: rem(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:

import { Grid } from '@asuikit/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:

import { Grid } from '@asuikit/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

import { Grid } from '@asuikit/core';

function Demo() {
  return (
    <Grid>
      <Grid.Col span="content">fit content</Grid.Col>
      <Grid.Col span={6}>2</Grid.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):

import { Grid } from '@asuikit/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>
  );
}

Grid component includes negative margins to align it with the rest of the content. Due to this you may have horizontal scrollbar if you use Grid in an element without padding. To fix this issue either wrap Grid with Container or remove margin with m prop:

import { Grid, Container } from '@asuikit/core';

function WithContainer() {
  return (
    <Container fluid>
      <Grid>{/* ...cols */}</Grid>
    </Container>
  );
}

function WithMargin() {
  return <Grid m={0}>{/* ...cols */}</Grid>;
}

Go back

Flex – @asuikit/core

Up next

Group – @asuikit/core

Grid component props

Name	Type	Description
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, key of theme.spacing or number for value
gutterLg	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Gutter when screen size is larger than theme.breakpoints.lg
gutterMd	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Gutter when screen size is larger than theme.breakpoints.md
gutterSm	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Gutter when screen size is larger than theme.breakpoints.sm
gutterXl	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Gutter when screen size is larger than theme.breakpoints.xl
gutterXs	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Gutter when screen size is larger than theme.breakpoints.xs
justify	JustifyContent	Set grid justify-content property

Grid.Col component props

Name	Type	Description
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)

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter