Columns

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

Alpha

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 (
    <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
children?React.ReactNode
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'.