Skip to contentShopify logoPolaris

Horizontal grid

Use to lay out children horizontally with equal gap between columns. 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 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 {HorizontalGrid} from '@shopify/polaris';


function HorizontalGridWithVaryingGapExample() {
  return (
    <SpacingBackground>
      <HorizontalGrid gap="4" columns={3}>
        <Placeholder height="320px" />
        <Placeholder height="320px" />
        <Placeholder height="320px" />
      </HorizontalGrid>
    </SpacingBackground>
  );
}

const SpacingBackground = ({
  children,
  width = '100%',
}: {
  children: React.ReactNode;
  width?: string;
}) => {
  return (
    <div
      style={{
        background: 'var(--p-color-bg-success-subdued)',
        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

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

interface HorizontalGridProps
children?React.ReactNode
columns?T | { [Breakpoint in BreakpointsAlias]?: 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; }<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