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.
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>Use standard Markdown with built-in components.
Push your changes and go live in seconds.
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">
Build and deploy from your terminal.
Rich UI elements for your content.
Full-text search out of the box.
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>Column accepts children and renders them inside a single grid cell.