AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Columns
Arrange content in multi-column layouts.
Use the Columns component to create responsive grid layouts. Columns stack on small screens and expand on larger viewports.
Two-column layout
The default cols value is 2:
<Columns>
<Card title="Write in MDX">
Use standard Markdown with built-in components.
</Card>
<Card title="Deploy instantly">
Push your changes and go live in seconds.
</Card>
</Columns>Write in MDX
Use standard Markdown with built-in components.
Deploy instantly
Push your changes and go live in seconds.
Three-column layout
Set cols={3} for a three-column grid:
<Columns cols={3}>
<Card title="CLI" href="/cli/overview">
Build and deploy from your terminal.
</Card>
<Card title="Components" href="/components/callout">
Rich UI elements for your content.
</Card>
<Card title="Search" href="/features/search">
Full-text search out of the box.
</Card>
</Columns>CLI
Build and deploy from your terminal.
Components
Rich UI elements for your content.
Search
Full-text search out of the box.
With Column wrapper
Use the Column component when you need to place non-card content in the grid:
<Columns cols={2}>
<Column>
### Left side
You can put any Markdown or components in a column.
</Column>
<Column>
### Right side
Columns are useful for side-by-side comparisons.
</Column>
</Columns>Props
Columns
Column
Column accepts children and renders them inside a single grid cell.