Skip to contentShopify logoPolaris

Grid

Create complex layouts based on CSS Grid.

Alpha

This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our component lifecycles.

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>
  );
}

Props

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

interface GridProps
areas?{ [Breakpoint in 'xs' | 'sm' | 'md' | 'lg' | 'xl']?: string[]; }

Set grid-template-areas.

Warning
Use nested layout components instead.

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

Related components