> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Columns

Equal-width column grid for side-by-side comparisons, feature lists, or mixed content layouts.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Columns playground on holydocs.com](https://holydocs.com/components/columns).

## When to use

Use this component when page density, comparison, or spatial composition matters as much as the words themselves.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### 2-Column

Side-by-side comparison layout.

### Before

    Manually write and maintain docs in a separate repo.
    Inconsistencies creep in with every release.
  ### After

    HolyDocs auto-generates and keeps docs in sync with
    your codebase on every push.

~~~mdx
<Columns cols={2}>
  <div>
    ### Before

    Manually write and maintain docs in a separate repo.
    Inconsistencies creep in with every release.
  </div>
  <div>
    ### After

    HolyDocs auto-generates and keeps docs in sync with
    your codebase on every push.
  </div>
</Columns>
~~~

### 3-Column

Three-column feature grid.

**Fast** — Docs build in seconds on Cloudflare's edge network.
  **Smart** — AI keeps content accurate as your code evolves.
  **Beautiful** — Polished themes that make your docs shine.

~~~mdx
<Columns cols={3}>
  <div>
    **Fast** — Docs build in seconds on Cloudflare's edge network.
  </div>
  <div>
    **Smart** — AI keeps content accurate as your code evolves.
  </div>
  <div>
    **Beautiful** — Polished themes that make your docs shine.
  </div>
</Columns>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `cols` | `number` | `2` | Number of columns. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<Columns cols={2}>
  <div>
    ### Before

    Manually write and maintain docs in a separate repo.
  </div>
  <div>
    ### After

    HolyDocs keeps your docs in sync automatically.
  </div>
</Columns>
~~~

## Tips

- Layout components amplify good content and bad content equally. Fix hierarchy and copy length before adding more structure.
- Test long headings, narrow screens, and translated strings. Layout bugs usually appear at the edges, not in the happy path.
- Use layout to create contrast between sections, not to decorate every paragraph.

## Related Components

**[View](/components/view)**

Switchable content panels for presenting alternative configurations, languages, or frameworks.
**[Panel](/components/panel)**

Place supplementary content in the right-side panel alongside your main documentation.
**[DataTable](/components/data-table)**

Responsive structured tables for plans, limits, environment variables, SDK support, and compatibility matrices.

## More

- Interactive playground: [Columns on holydocs.com](https://holydocs.com/components/columns)
- Component library index: [/components](/components)