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.
WarningUse 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
- To lay out a set of smaller components in a row, use the vertical stack component
- To lay out form fields, use the form layout component