---
title: Columns
description: Use columns to place two or three related content blocks side by side.
---

Use `Columns` when related content should be scanned together, such as choices, comparisons, checklists, or a small grid of cards. Each column must be wrapped in a `Column` component.

<ComponentPreview>
  ```mdx
  <Columns columns={2}>
    <Column>

    ### Plan

    Define the docs structure, navigation, and first pages.

    </Column>
    <Column>

    ### Publish

    Review the changes and publish the site when everything is ready.

    </Column>
  </Columns>
  ```
</ComponentPreview>

## Structure

`Columns` accepts either two or three columns. It does not create multiple rows automatically. If you need another row, add another `Columns` block.

<ComponentPreview>
  ```mdx
  <Columns columns={2}>
    <Column>

    ### First column

    Add Markdown, links, lists, or components.

    </Column>
    <Column>

    ### Second column

    Keep each column focused and easy to scan.

    </Column>
  </Columns>

  <Columns columns={2}>
    <Column>

    ### Third item

    Start a new row with another `Columns` block.

    </Column>
    <Column>

    ### Fourth item

    This keeps layout behavior predictable.

    </Column>
  </Columns>
  ```
</ComponentPreview>

## Three columns

Set `columns={3}` for compact summaries or groups of similarly sized items.

<ComponentPreview>
  ```mdx
  <Columns columns={3}>
    <Column>

    ### Write

    Create pages using MDX.

    </Column>
    <Column>

    ### Preview

    Check the site locally.

    </Column>
    <Column>

    ### Publish

    Ship the latest version.

    </Column>
  </Columns>
  ```
</ComponentPreview>

## Rich content

Columns can contain normal Markdown or other docs components. This is especially useful for placing cards side by side.

<ComponentPreview>
  ```mdx
  <Columns columns={2}>
    <Column>

    <Card
      title="Quickstart"
      href="/getting-started/quickstart"
      icon="lucide:rocket"
    >
      Build and publish your first docs site.
    </Card>

    </Column>
    <Column>

    <Card
      title="Content model"
      href="/getting-started/content-model"
      icon="lucide:blocks"
    >
      Learn how content, navigation, and configuration fit together.
    </Card>

    </Column>
  </Columns>
  ```
</ComponentPreview>

You can also mix components with plain Markdown.

<ComponentPreview>
  ```mdx
  <Columns columns={2}>
    <Column>

    ### Checklist

    - Add the page title
    - Write the introduction
    - Link to related docs

    </Column>
    <Column>

    <Callout type="tip" title="Keep columns short">
      Columns work best when each item has a similar amount of content.
    </Callout>

    </Column>
  </Columns>
  ```
</ComponentPreview>

## Responsive behavior

Columns respond to the width of the component, not just the width of the screen. This keeps layouts predictable when the docs content area changes size.

Two-column layouts collapse to one column when the component becomes narrow. Three-column layouts collapse earlier so each column has enough room to remain readable.

<Callout type="tip" title="Use one row per Columns block">
  A `Columns` block must contain exactly the same number of `Column` children as the `columns` prop. Use another `Columns` block when you want another row.
</Callout>

## Props

### Columns

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | `2` or `3` | `2` | Number of columns in the row. The component must contain exactly this many `Column` children. |

### Column

`Column` does not accept props. Use it only as a direct child of `Columns`.