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

Props