ResponsiveTiles

A responsive grid of tiles that changes the number of columns based on the viewport size. This component commonly used in product listings and search results.

Import
import ResponsiveTiles from 'react-storefront/ResponsiveTiles'

Props

NameTypeDefaultDescription
colsobject{ xs: 2, sm: 3, md: 4, lg: 5, xl: 5 }

A map of viewport widths to number of columns. For example:

 cols={{
   xs: 2,
   sm: 3,
   md: 4,
   lg: 5,
   xl: 5
 }}

The amounts shown in the example above are the defaults.

spacingnumber15

The spacing between the tiles in pixels. Defaults to 15