Create responsive balanced content columns with configurable count, gap, density, and maximum width.
Change any prop and inspect the server-rendered component immediately.
<Columns />Compare configurations and resize the browser to check responsive behavior.
Split supporting content into balanced responsive columns.
<Columns
gap="lg">
<div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div>
</Columns>Use three columns for short summaries and dashboard groups.
<Columns
size="compact"
columns="3"
gap="sm"
maxWidth="wide">
<div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div>
</Columns>Use the full available width for structured application content.
<Columns
size="lg"
columns="4"
maxWidth="full">
<div class="showcase-grid-items"><span>A</span><span>B</span><span>C</span><span>D</span></div>
</Columns>All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
columns | number | 2 | No |
gap | string | "md" | No |
maxWidth | string | "xl" | No |
class | string | "" | No |