Tiles

Also known as a RAM (repeat, auto, minmax) layout. It is a tile system in which the browser determines how many tiles fit in the avaiable space. It rounds down the number of tiles on a single row, and stretches the tiles to fit the space. When the screen shrinks, the amount of tiles on a row decreases automatically.

Implementation

<div class="tiles --threshold-{z}">
  ...
</div>

API

Custom propertyDefaultDescription
--layout-threshold0Sets the min-width of the child elements
--layout-gap0Sets the gap of the targeted element

Utility classes

Class nameRequired?Description
--threshold-{z}RequiredControls the --layout-threshold API
--gap-{z}Controls the --layout-gap API