Columns

Usage

<Columns> wraps any children in a responsive grid. Use it for side-by-side prose, image+text combinations, or comparison blocks where you don't want the visual treatment of <CardGroup>.

<Columns cols={2}>
  <div>
    **Before:** Manual MDX authoring with no validation.
    Authors had to remember every component name and prop.
  </div>
  <div>
    **After:** LLM-first authoring with the MCP server.
    Claude/Cursor know every component natively.
  </div>
</Columns>

3 columns

<Columns cols={3}>
  <div>
    **Free**: 1 project, basic theme
  </div>
  <div>
    **Pro**: Unlimited projects, AI search
  </div>
  <div>
    **Business**: Audit log, SSO, priority support
  </div>
</Columns>

Responsive behavior

Columns collapse to a single column on mobile. The breakpoint depends on cols:

• cols={2} → 1 column < 640px (sm), 2 columns ≥ 640px

• cols={3} → 1 column < 640px, 2 columns 640–1024px, 3 columns ≥ 1024px (lg)

• cols={4} → same as cols=3 but 4 columns ≥ 1024px

Differences from CardGroup

Column wrapper

The <Column> component is a pass-through wrapper you can use instead of a bare <div> as a child of <Columns>. It renders identically — no extra styling or behavior — but it reads more explicitly in MDX:

<Columns cols={2}>
  <Column>
    **Left side** — using the Column wrapper.
  </Column>
  <Column>
    **Right side** — same result as a plain `<div>`.
  </Column>
</Columns>

Both forms are valid. Use whichever reads better in your content. <Column> exists primarily for Mintlify compatibility — if you're migrating docs that already use <Column>, they work as-is.

Props

Columns

Column