Open in Playroom
The Tiles component is used to lay out a collection of elements left to right, top to bottom — wrapping across a specified number of columns.
  • Columns For fine-grained control of widths, spacing and alignment.
  • Inline For laying out flowing content that is allowed to wrap.
  • Box For custom layouts.
The number of tiles in each row. Accepts a number from 1 to 5, also supporting responsive values, e.g. columns={{ mobile: 2, tablet: 3, desktop: 4, wide: 5 }}
Open in Playroom
Control the amount of space between each tile using the space prop, also supporting responsive values, e.g. space={{ mobile: 'small', tablet: 'medium', desktop: 'large', wide: 'xlarge' }}
Open in Playroom