---
title: Columns
description: Place content side by side in a responsive multi-column layout.
url: http://localhost:3040/components/columns
---

# Columns

Place content side by side in a responsive multi-column layout.

`` creates a CSS grid with a configurable number of columns. Unlike ``, there is no card border — it is purely a layout primitive that collapses to a single column on mobile.

## Two columns

  <div>
    **Left column**

    Use this for comparison tables, side-by-side code snippets, or multi-panel diagrams. Both columns stack vertically on mobile.
  </div>
  <div>
    **Right column**

    Each column can contain any MDX content — paragraphs, lists, code blocks, callouts, or nested components.
  </div>

```mdx

  <div>Left content</div>
  <div>Right content</div>

```

## Three columns

  <div>
    **Setup**

    Install the package, add your API key, and run `npm run dev`.
  </div>
  <div>
    **Configure**

    Edit `docs.json` to define your navigation, branding, and integrations.
  </div>
  <div>
    **Deploy**

    Push to GitHub and connect your repo to Vercel or any static host.
  </div>

```mdx

  <div>**Setup** — Install and run.</div>
  <div>**Configure** — Edit docs.json.</div>
  <div>**Deploy** — Push to GitHub.</div>

```

## Four columns

  <div>
    **TypeScript**

    Strongly typed SDK with full IntelliSense support.
  </div>
  <div>
    **Python**

    Async-first client compatible with FastAPI and Django.
  </div>
  <div>
    **Go**

    Lightweight, zero-dependency module for Go 1.21+.
  </div>
  <div>
    **Ruby**

    Idiomatic gem with ActiveSupport extensions.
  </div>

```mdx

  <div>**TypeScript**</div>
  <div>**Python**</div>
  <div>**Go**</div>
  <div>**Ruby**</div>

```

## Combining with other components

Columns work well with `` for side-by-side image comparisons:

    <img src="/images/image1.jpg" alt="Before" />

    <img src="/images/image2.jpg" alt="After" />

```mdx

    <img src="/images/before.png" alt="Before" />

    <img src="/images/after.png" alt="After" />

```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `cols` | `1 \| 2 \| 3 \| 4` | `2` | Number of columns |