Columns

Setting the number of columns within the container.

Overview

Basic usage

Set column count

Use cols: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="cols:3">
    <img class="w:full aspect:1/1" src="…" />
    <img class="w:full aspect:3/2" src="…" />
    …
</div>

Flexible multi-column layout

Use cols: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="cols:4|100px">
    <img class="w:full aspect:1/1" src="…" />
    <img class="w:full aspect:3/2" src="…" />
    …
</div>

Conditionally apply

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>