# Columns
> Column grid, equal or in twelfths.
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
```mdx
…
…
```
## 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}
```mdx
…
…
```
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
```mdx
…
```
With the custom theme, a class of your own sets it — here `wide-gap`, from
`theme/99-docpensieve.css`:
The gap widens
without touching the widths
```mdx
…
```
```css
.wide-gap {
gap: 2.5rem;
}
```
## 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.
```mdx
The point
The remark
```
## Two code columns
Compare two spellings side by side.
```js
versions: [{ slug: 'v1.0', current: true }];
```
```js
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
```mdx
…
```
With the custom theme, a class of your own — here `flow`, from
`theme/99-docpensieve.css`:
One
Two, a little longer, so that the heights differ.
Three
Four
Five
```mdx
…
```
```css
.flow {
columns: 2;
column-gap: 1.5rem;
}
@media (min-width: 40rem) {
.flow {
columns: 3;
}
}
.flow > * {
break-inside: avoid;
margin-block-end: 1.5rem;
}
```
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](/versions/beta/components/card/) shows how to keep
them to the same height, which a grid alone does not do.
## Properties
`Column`:
| Property | Type | Effect |
| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
| `span` | `number` | Tracks taken out of twelve — `6` for a half, `8` for two thirds. Without it, the columns share the space equally. |
| `className` | `string` | Classes added to the column. |
| `style` | `object` | Inline styles on the column. |
`Columns` takes `className` and `style`. A `Column` outside a `Columns` stops the build.