Polaris ReactInline grid
Use to lay out children horizontally with equal gap between columns. Based on CSS Grid.
Upgrade to Polaris Web Components
Inline grid is now available as a framework-agnostic web component.
Start using <s-grid>Inline grid component examples
Use the gap prop to set the amount of space between columns. The gap prop supports responsive spacing with the Breakpoints tokens.
import React from 'react';
import {InlineGrid} from '@shopify/polaris';
function InlineGridWithVaryingGapExample() {
return (
<SpacingBackground>
<InlineGrid gap="400" columns={3}>
<Placeholder height="320px" />
<Placeholder height="320px" />
<Placeholder height="320px" />
</InlineGrid>
</SpacingBackground>
);
}
const SpacingBackground = ({
children,
width = '100%',
}: {
children: React.ReactNode;
width?: string;
}) => {
return (
<div
style={{
background: 'var(--p-color-bg-surface-success)',
width,
height: 'auto',
}}
>
{children}
</div>
);
};
const Placeholder = ({height = 'auto', width = 'auto'}) => {
return (
<div
style={{
display: 'inherit',
background: 'var(--p-color-text-info)',
height: height ?? undefined,
width: width ?? undefined,
}}
/>
);
};Props
interface InlineGridProps
- children?React.ReactNode
- columns?T | ({ [Breakpoint in BreakpointsAlias]?: T; })<T><number | string | ('oneThird' | 'oneHalf' | 'twoThirds')[]>
The number of columns to display. Accepts either a single value or an object of values for different screen sizes.
- gap?T | ({ [Breakpoint in BreakpointsAlias]?: T; })<T><SpaceScale>
The spacing between children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
- alignItems?'start' | 'end' | 'center'
Vertical alignment of children. If not set, inline elements will stretch to the height of the parent.
Related components
- For more control over padding and widths, use the Box component
- To lay out a set of smaller components horizontally, use the InlineStack component
Related resources
- InlineGrid props are named following the convention of CSS logical properties, such as alignItems="start" vs. alignItems="left". Learn more about CSS logicial properties.