Skip to contentShopify logoPolaris

Tiles

Displays a tiled grid of equal-sized elements with equal spacing between them.

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.

Use the spacing prop to set the amount of space between tiles.

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


function TilesWithSpacingExample() {
  return (
    <Tiles columns={{xs: 3}} gap={{xs: '4'}}>
      <Placeholder label="01" />
      <Placeholder label="02" />
      <Placeholder label="03" />
      <Placeholder label="04" />
      <Placeholder label="05" />
      <Placeholder label="06" />
    </Tiles>
  );
}

const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
  return (
    <div
      style={{
        background: '#7B47F1',
        padding: 'var(--p-space-2)',
        height: height,
        width: width,
      }}
    >
      <div
        style={{
          color: '#FFFFFF',
        }}
      >
        <Text as="h2" variant="bodyMd" fontWeight="medium">
          {label}
        </Text>
      </div>
    </div>
  );
};

Props

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

interface TilesProps
childrenReact.ReactNode

Elements to display inside tile.

gap?{ [Breakpoint in BreakpointsAlias]?: SpacingSpaceScale; }

Adjust spacing between elements.

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

Adjust number of columns.