Columns

A grid: each block is placed, with its width. Not to be confused with CSS multi-column, where content flows from one column to the next — see below, it needs no component.

Equal columns

Without an imposed width, the columns share the space equally, whatever their content.

First

Second, with a noticeably longer text to check that the columns keep the same width.

Third

<Columns>
  <Column>…</Column>
  <Column>…</Column>
</Columns>

Widths in twelfths

span is the number of tracks a column takes out of twelve: span={6} for a half, span={8} for two thirds, span={3} for a quarter. Twelve because twelve divides by two, three, four and six — halves, thirds, quarters and sixths all fall right.

A value outside 1–12 stops the build, as does a row that mixes columns with and without a width: the column without a width would take only one track out of twelve, a sliver where the author expected a column.

span=8

span=4

<Columns>
  <Column span={8}>…</Column>
  <Column span={4}>…</Column>
</Columns>

A Column written outside a Columns is refused: on its own, it would produce nothing visible, and the error would take a long time to find.

Spacing the columns

span sets the width of a column, gap the space between columns: two independent settings. The grid subtracts the gaps by itself, so spacing the columns distorts no width.

With the Tailwind theme, a gap-* utility sets it:

The gap widens

without touching the widths

<Columns className="gap-10">…</Columns>

An aside next to the text

The most useful layout in documentation: the main point wide, the remark narrow.

The compiler plugins rewrite the URLs of the tree built from the Markdown. That work happens before the components are rendered: a target written in a prop escapes them, and must resolve itself.

That is why every rendered page is announced to the components, just as the class table is announced to them.

Remember

A component that produces a URL resolves it itself, following the same rules as a Markdown link.

<Columns>
  <Column span={8}>The point</Column>
  <Column span={4}>The remark</Column>
</Columns>

Two code columns

Compare two spellings side by side.

versions: [{ slug: 'v1.0', current: true }];

versions: [
  { slug: 'v1.1', prerelease: true },
  { slug: 'v1.0', current: true },
];

Letting content flow

For a text or a gallery that flows from one column to the next, the grid is not the right tool and no component is needed: CSS multi-column is enough, directly in the page.

With the Tailwind theme, its utilities write it:

One

Two, a little longer, so that the heights differ.

Three

Four

Five

<div className="columns-2 gap-6 sm:columns-3">…</div>

The difference is there: above, the order is vertical and the browser distributes as it likes; with Columns, each block stays where you put it.

On small screens

Below tablet width, the grid columns stack one under the other. Shrink the window to check.

The most frequent row is a row of cards; Card shows how to keep them to the same height, which a grid alone does not do.