PolarisInline grid
Use to lay out children horizontally with equal gap between columns. Based on CSS 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.