Syntax

Columns

Setting the number of columns within the container.

Overview

ClassDeclarations
cols:valuecolumns: value;

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.

mountain
mountain
mountain
mountain
mountain
mountain
mountain
mountain
mountain
<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.

mountain
mountain
mountain
mountain
mountain
mountain
mountain
mountain
<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 applying conditionally.

<div class="columns:5:hover columns:5@sm columns:5@dark columns:5@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.