Columns

Create multi-column layouts

Syntax

layout="cols:[value]"

Values

Value	CSS Output	Description
1-12	columns: {n}	N columns
auto	columns: auto	Auto columns

Examples

<div layout="cols:3">Three columns</div>

Preview

Multi-Column Layout

layout="cols:2" - Text flows into multiple columns

This text will automatically flow into two columns. Great for newspaper-style layouts and improving readability of long text content.

View Code

<div layout="cols:2" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <p visual="text:neutral-800 dark:text:neutral-200">This text will automatically flow into two columns. Great for newspaper-style layouts and improving readability of long text content.</p>
</div>