Columns
A multi-column layout for placing blocks side by side.
Use columns to arrange related content horizontally. Columns collapse to one column on narrow screens.
Left column content.
Right column content.
<Columns cols="2">
Left column content.
Right column content.
</Columns>Props
| Prop | Type | Default |
|---|---|---|
cols | "2" | "3" | "4" | "2" |
Variants
Two columns
Left column content.
Right column content.
<Columns cols="2">
Left column content.
Right column content.
</Columns>Three columns
First column.
Second column.
Third column.
<Columns cols="3">
First column.
Second column.
Third column.
</Columns>Four columns
One.
Two.
Three.
Four.
<Columns cols="4">
One.
Two.
Three.
Four.
</Columns>