Columns
Create responsive multi-column layouts for your content
The Columns component creates responsive grid layouts for organizing content side-by-side.
Usage
mdx
1<Columns cols={{ sm: 1, md: 2, lg: 3 }}>2 <Column>First column content</Column>3 <Column>Second column content</Column>4 <Column>Third column content</Column>5</Columns>Live Examples
Two Columns
Left Column
This content appears on the left side (or stacks on mobile).
Right Column
This content appears on the right side.
Three Columns
Feature 1
First feature description
Feature 2
Second feature description
Feature 3
Third feature description
Column Spanning
Use the span prop to make columns take up more space:
Wide Column
This column spans 2 of 3 columns for more prominent content.
Narrow
Single column width.
Props
Columns
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Column components |
cols | object | { sm: 1, md: 2, lg: 3 } | Columns at each breakpoint |
cols.sm | 1-4 | 1 | Columns on small screens |
cols.md | 1-4 | 2 | Columns on medium screens |
cols.lg | 1-4 | 3 | Columns on large screens |
cols.xl | 1-4 | - | Columns on extra-large screens |
Column
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Column content |
span | 1 | 2 | 3 | 4 | 1 | Number of columns to span |
Responsive Behavior
Tip
Columns automatically stack on mobile devices. The `sm`, `md`, `lg`, and `xl` breakpoints let you control how content reflows at different screen sizes.