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" style="--layout-gap: 1rem; --layout-threshold: 15rem">
<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 |
|---|---|
.--fit |
Uses auto-fit instead of auto-fill (collapses empty columns) |