Skip to contentShopify logoPolaris

Grid

Create complex layouts based on CSS Grid.

Alpha

This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

Use to create a two column layout that wraps at a breakpoint and aligns to a twelve column grid.

import {Page, Grid, Card} from '@shopify/polaris';
import React from 'react';

function GridExample() {
  return (
    <Page fullWidth>
      <Grid>
        <Grid.Cell columnSpan={{xs: 6, sm: 3, md: 3, lg: 6, xl: 6}}>
          <Card title="Sales" sectioned>
            <p>View a summary of your online store’s sales.</p>
          </Card>
        </Grid.Cell>
        <Grid.Cell columnSpan={{xs: 6, sm: 3, md: 3, lg: 6, xl: 6}}>
          <Card title="Orders" sectioned>
            <p>View a summary of your online store’s orders.</p>
          </Card>
        </Grid.Cell>
      </Grid>
    </Page>
  );
}

Use to create a two-thirds, one-third column layout that wraps at a breakpoint and aligns to a twelve column grid.

import {Page, Grid, Card} from '@shopify/polaris';
import React from 'react';

function GridExample() {
  return (
    <Page fullWidth>
      <Grid columns={{sm: 3}}>
        <Grid.Cell columnSpan={{xs: 6, sm: 4, md: 4, lg: 8, xl: 8}}>
          <Card title="Sales" sectioned>
            <p>View a summary of your online store’s sales.</p>
          </Card>
        </Grid.Cell>
        <Grid.Cell columnSpan={{xs: 6, sm: 2, md: 2, lg: 4, xl: 4}}>
          <Card title="Orders" sectioned>
            <p>View a summary of your online store’s orders.</p>
          </Card>
        </Grid.Cell>
      </Grid>
    </Page>
  );
}

Use to create a three column layout that wrap at a breakpoint and aligns to a twelve column grid.

import {Page, Grid, Card} from '@shopify/polaris';
import React from 'react';

function GridExample() {
  return (
    <Page fullWidth>
      <Grid columns={{sm: 3}}>
        <Grid.Cell columnSpan={{xs: 6, sm: 4, md: 4, lg: 8, xl: 8}}>
          <Card title="Sales" sectioned>
            <p>View a summary of your online store’s sales.</p>
          </Card>
        </Grid.Cell>
        <Grid.Cell columnSpan={{xs: 6, sm: 2, md: 2, lg: 4, xl: 4}}>
          <Card title="Orders" sectioned>
            <p>View a summary of your online store’s orders.</p>
          </Card>
        </Grid.Cell>
      </Grid>
    </Page>
  );
}

Use to create a layout that can be customized at specific breakpoints.

import {Page, Grid, Card} from '@shopify/polaris';
import React from 'react';

function GridExample() {
  return (
    <Page fullWidth>
      <Card sectioned>
        <Grid
          columns={{xs: 1, sm: 4, md: 4, lg: 6, xl: 6}}
          areas={{
            xs: ['product', 'sales', 'orders'],
            sm: [
              'product product product product',
              'sales sales orders orders',
            ],
            md: ['sales product product orders'],
            lg: ['product product product product sales orders'],
            xl: ['product product sales sales orders orders'],
          }}
        >
          <Grid.Cell area="product">
            <div
              style={{
                height: '60px',
                background: 'aquamarine',
              }}
            />
          </Grid.Cell>
          <Grid.Cell area="sales">
            <div
              style={{
                height: '60px',
                background: 'aquamarine',
              }}
            />
          </Grid.Cell>
          <Grid.Cell area="orders">
            <div
              style={{
                height: '60px',
                background: 'aquamarine',
              }}
            />
          </Grid.Cell>
        </Grid>
      </Card>
    </Page>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface GridProps
areas?{ [Breakpoint in 'xs' | 'sm' | 'md' | 'lg' | 'xl']?: string[]; }
columns?{ [Breakpoint in 'xs' | 'sm' | 'md' | 'lg' | 'xl']?: number; }
gap?{ [Breakpoint in 'xs' | 'sm' | 'md' | 'lg' | 'xl']?: string; }
children?React.ReactNode