Displays content horizontally in one or more columns with equal spacing between.


This component and its documentation is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

By default, there are 6 columns with 16px spacing between them.

import React from 'react';
import {Columns, Text, Inline} from '@shopify/polaris';

function ColumnsExample() {
  return (
      <Placeholder height="320px" label="01" />
      <Placeholder height="320px" label="02" />
      <Placeholder height="320px" label="03" />
      <Placeholder height="320px" label="04" />
      <Placeholder height="320px" label="05" />
      <Placeholder height="320px" label="06" />

const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
  return (
        display: 'inherit',
        background: '#7B47F1',
        height: height ?? undefined,
        width: width ?? undefined,
      <Inline align="center" blockAlign="center">
            color: '#FFFFFF',
            width: width ?? undefined,
          <Text as="h2" variant="bodyMd" fontWeight="medium" alignment="center">


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

interface ColumnsProps
columns?{ [Breakpoint in BreakpointsAlias]?: number | string; }

The number of columns to display.

Defaults to {xs: 6, sm: 6, md: 6, lg: 6, xl: 6}.

gap?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

The spacing between children. Accepts a spacing token or an object of spacing tokens for different screen sizes.

Defaults to '4'.