Skip to contentShopify logoPolaris

Columns

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

Alpha

This component 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 (
    <Columns>
      <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" />
    </Columns>
  );
}

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

Props

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

interface ColumnsProps
spacing?{ [Breakpoint in BreakpointsAlias]?: SpacingSpaceScale; }

The spacing between columns.

Defaults to '4'.

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

The number of columns to display.

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

children?React.ReactNode

Elements to display inside columns.