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.