Inline 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.

  • InlineGrid props are named following the convention of CSS logical properties, such as alignItems="start" vs. alignItems="left". Learn more about CSS logicial properties.

    On this page