Skip to contentShopify logoPolaris

Grid

Create complex layouts based on CSS Grid.

Deprecated

Grid was built prior to layout primitives like columns, inline, and alpha stack. Comparatively, grid is difficult to learn, document, and understand its usage in a codebase. The new layout primitives should be used in combination to achieve similar results to grid.

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

import {Page, Grid, LegacyCard} 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}}>
          <LegacyCard title="Sales" sectioned>
            <p>View a summary of your online store’s sales.</p>
          </LegacyCard>
        </Grid.Cell>
        <Grid.Cell columnSpan={{xs: 6, sm: 3, md: 3, lg: 6, xl: 6}}>
          <LegacyCard title="Orders" sectioned>
            <p>View a summary of your online store’s orders.</p>
          </LegacyCard>
        </Grid.Cell>
      </Grid>
    </Page>
  );
}