✨ Publier v1 is live — a polished docs platform built for the open web.
Skip to content

Columns

Responsive multi-column CSS grid — 2, 3, or 4 columns on wide viewports, single column on mobile. Use for comparisons, side-by-side examples, and feature parallels.

<Columns> arranges its children side-by-side. Pass any MDX as children — paragraphs, code blocks, cards, lists. Pick the cols count by how much horizontal room each column needs; Columns collapses to a single column on narrow viewports automatically.

Two columns (default)

Before. Manually importing plugins, wiring MDX config, and maintaining a custom remark/rehype chain for every site.

After. One integration wires the whole pipeline — idempotent, zero-config, disable-flag-escape-hatches for everything.

import { Columns } from '@publier/shell/components';


<Columns>
  <div>
    **Before.** Manually importing plugins, wiring MDX config, and
    maintaining a custom remark/rehype chain for every site.
  </div>
  <div>
    **After.** One integration wires the whole pipeline —
    idempotent, zero-config, disable-flag-escape-hatches for everything.
  </div>
</Columns>

Three columns

Install. Scaffold with publier new my-site.
Write. Add .mdx files to src/content/docs/.
Ship. Run publier build and deploy the dist/ folder.
<Columns cols={3}>
  <div>**Install.** Scaffold with `publier new my-site`.</div>
  <div>**Write.** Add `.mdx` files to `src/content/docs/`.</div>
  <div>**Ship.** Run `publier build` and deploy the `dist/` folder.</div>
</Columns>

Four columns

Write. MDX content.
Style. Themed tokens.
Build. One command.
Ship. Static output.
<Columns cols={4} gap="sm">
  <div>**Write.** MDX content.</div>
  <div>**Style.** Themed tokens.</div>
  <div>**Build.** One command.</div>
  <div>**Ship.** Static output.</div>
</Columns>

Mixed content — cards in columns

Columns compose cleanly with every other primitive:

Pro: zero JS

Most Publier MDX primitives are pure CSS. No hydration cost, no layout shift.

Con: no state

For interactive widgets (AskAi, version switcher), use the components from @publier/shell. Site-wide search is auto-wired by docsShell().

<Columns>
  <Card title="Pro: zero JS" variant="tip">
  Most Publier MDX primitives are pure CSS.
  </Card>
  <Card title="Con: no state" variant="note">
  For interactive widgets use `@publier/shell`.
  </Card>
</Columns>

Gap sizes

Three preset gaps: sm (0.5rem), md (1rem, default), lg (1.5rem).

gap="lg" — more breathing room between columns.
Useful when columns contain dense content and need visual separation.

Props

PropTypeDefaultDescription
cols2 | 3 | 42Number of columns on wide viewports.
gap'sm' | 'md' | 'lg''md'Column gap.
classstring—Extra CSS class.

Children are placed into columns in source order.

Behaviour

  • CSS grid grid-template-columns: repeat({cols}, 1fr).
  • Collapses to one column below the md breakpoint — no media queries needed by you.
  • Zero JavaScript.