Source

Tiles

The Tiles layout creates an auto-responsive grid system that determines column count based on minimum tile width. This component creates as many columns as can fit while respecting the minimum width constraint, making it perfect for image galleries, product grids, or any content that needs to automatically adjust its layout based on available space and content requirements.

Example

<div class="tiles --gap-2 --threshold-2">
  <div>Tile 1</div>
  <div>Tile 2</div>
  <div>Tile 3</div>
  <div>Tile 4</div>
  <div>Tile 5</div>
  <div>Tile 6</div>
</div>

Custom Properties

Property	Default	Description
`--layout-gap`	`0`	Gap between child elements
`--layout-threshold`	`0`	Minimum width of each tile
`--tiles-repeat`	`auto-fill`	Grid repeat function

Class Utilities

Class	Description
`.--gap-*`	Controls spacing between items using Feo.css design tokens for size
`.--threshold-*`	Controls the minimum tile width using Feo.css design tokens for breakpoints
`.--fit`	Uses auto-fit instead of auto-fill (collapses empty columns)

← layout: Switcher utilities: Click Area →