Columns

Columns put regions side by side. The first column is implicit; each ::col line starts the next. A ratio such as 2:1 sizes them, and its term count must match the column count. Put the primary column first, because the downgrade emits columns in source order.

Because ::col is a two-colon line rather than a nested fence, two columns do not cost four levels of fencing. Note the four-colon outer fence when a card sits inside a column.

Attributes

Attribute Values Default
ratio Colon-separated integers, one per column equal
gap sm md lg md

A ::col separator takes #id and classes of its own; any other key on it warns. If ratio is present its term count must equal the number of columns, or it is an error and the ratio is dropped. A columns with no separator at all is a warning, since a single column is almost always a mistake.

Downgrade: the columns in source order, one after another, with the separators removed. Put the column that must be read first in the first position.

Watch for: ratio is the only per-instance geometry in the whole vocabulary, and it exists because relative column width is genuinely content, not styling. It is not a licence to size anything else.

Examples

Content before the first ::col is the first column. The separator is a two-colon line, so two columns do not cost two levels of fencing.

canonical

Source

::::columns{ratio="2:1"}
The main argument, at full paragraph length.

::col

:::card{tone=neutral}
A supporting sidebar.
:::
::::

Rendered

The main argument, at full paragraph length.

A supporting sidebar.

Downgrade

The main argument, at full paragraph length.

A supporting sidebar.

ratio sizes the columns and its term count must equal the column count. This is the one place a document carries geometry.

three-term ratio and gap

Source

:::columns{ratio=1:2:1 gap=sm}
A

::col

B

::col

C
:::

Rendered

A

B

C

Downgrade

A

B

C

A ::col line takes its own attribute specifier, which is how one column is singled out for a theme.

id and classes on the separator

Source

:::columns
A

::col{#side .narrow}

B
:::

Rendered

A

B

Downgrade

A

B

Three levels deep, so the fences step down from the outside in: five colons, then four, then three. Each closing fence matches its own opener.

nested inside a card

Source

:::::card
::::columns
A

::col

:::card
B
:::
::::
:::::

Rendered

A

B

Downgrade

A

B

What the validator catches

Every error below is specified; nothing degrades silently.

ratio term count must match the columns

invalid

Source

:::columns{ratio=1:1:1}
A

::col

B
:::

Rendered

A

B

Diagnostics: COLUMNS_RATIO_MISMATCH

malformed ratio

invalid

Source

:::columns{ratio=2/1}
A

::col

B
:::

Rendered

A

B

Diagnostics: DIRECTIVE_INVALID_ATTRIBUTE

ratio terms must be positive

invalid

Source

:::columns{ratio=0:1}
A

::col

B
:::

Rendered

A

B

Diagnostics: DIRECTIVE_INVALID_ATTRIBUTE

All 14 cases for columns are in the conformance browser. The normative text is spec §4.