Columns

Style syntax for setting the number of columns within the container.

Overview [sr-only]

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 minimum width of each column to width and 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 in different states using selectors, media queries, etc.

<div class="columns:5:hover columns:5@sm columns:5@dark columns:5@print">…</div>