Layout
columns
Setting the number of columns within the container.
Overview
| Class | Declarations |
|---|---|
columns:<value> | columns: <value>;
|
Basic usage
Set column count
Use columns:value to set the number of columns when creating a multi-column layout. The column width will automatically adjust to the column count.
<div class="columns:3"> <img class="w:full aspect-ratio:1/1" src="…" /> <img class="w:full aspect-ratio:3/2" src="…" /> …</div>Flexible multi-column layout
Use columns:count|width to set the minimum width of each column to width and the maximum number of columns to count columns when creating a flexible multi-column layout.
<div class="columns:4|100px"> <img class="w:full aspect-ratio:1/1" src="…" /> <img class="w:full aspect-ratio:3/2" src="…" /> …</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="columns:5:hover columns:5@sm columns:5@dark columns:5@print">…</div>