layout-columns

Multi-column text flow with measure constraints, column breaks, and vertical rhythm. Handles responsive column layout as a pure CSS layer — no JavaScript required.

Attributes

Attribute Values Default Description
data-layout-column-count auto, 1, 2, 3 absent (single column) Column strategy. auto uses CSS column-width for responsive columns. Numbers set explicit column count.
data-layout-measure narrow, normal, wide normal (65ch) Constrains single-column line length. No effect when multi-column is active.
data-layout-align start, justify start Text alignment. justify enables automatic hyphenation.

How It Works

The layout-columns element is a column flow primitive. It controls:

  • Measure — constrains line length to a readable width (65ch default)
  • Column flow — responsive or explicit multi-column layout via CSS columns
  • Break hygiene — prevents blockquotes, figures, tables, lists from splitting across columns
  • Vertical rhythm — intelligent spacing between headings, paragraphs, and blocks (same rules as layout-text)
  • Inline padding — gutter so content doesn't touch screen edges on mobile

It does not set font family, hyphenation defaults, or drop caps — those belong to the <article> element's existing data-prose and data-drop-cap attributes.

Usage Examples

Single Column (Default)

Without any attributes, layout-columns provides a measure-constrained container with vertical rhythm:

<layout-columns> <article> <h2>Article Title</h2> <p>Single-column content with measure constraint and vertical rhythm applied automatically.</p> <p>Line length stays readable at any viewport width.</p> </article> </layout-columns>

Auto Columns

The recommended responsive pattern. The browser fits as many columns as the container allows, based on a minimum column width of 38ch:

<layout-columns data-layout-column-count="auto" data-layout-align="justify"> <article data-prose> <h2>Responsive Columns</h2> <p>Browser determines column count from available width. Single column on mobile, multi-column on wider screens.</p> </article> </layout-columns>

Explicit Two Column

Force a fixed column count. Best for controlled-width contexts:

<layout-columns data-layout-column-count="2"> <article> <h2>Two Columns</h2> <p>Explicit two-column layout. Use when the column count must be fixed regardless of viewport width.</p> </article> </layout-columns>

Narrow Measure

Tighter line length for sidebars and captions:

<layout-columns data-layout-measure="narrow"> <article> <h2>Narrow Reading</h2> <p>45ch measure. Appropriate for short articles, captions, or sidebar content.</p> </article> </layout-columns>

Attribute Form

Like other layout primitives, you can use data-layout="columns" directly on a semantic element instead of wrapping in <layout-columns>:

<!-- Same layout, no wrapper element --> <article data-layout="columns" data-layout-column-count="2" data-layout-align="justify" data-prose> <h2>Two Columns via Attribute</h2> <p>The data-layout attribute form applies the same styles directly to a semantic element.</p> </article>

Inside reader-view

layout-columns is the inner surface for reader-view, which adds paged reading mode:

<reader-view mode="pages" columns="2"> <layout-columns data-layout-align="justify"> <article data-prose> <h1>Article Title</h1> <p>Content inside reader-view gets paged reading mode with column controls and page navigation.</p> </article> </layout-columns> </reader-view>

Column Strategy

The correct CSS multi-column idiom for responsive use is column-width, not column-count. The browser determines how many columns fit:

Viewport Auto Columns
390px (iPhone)~1 column
820px (iPad)~2 columns
1200px (desktop)~3 columns

For explicit counts (data-layout-column-count="2"), column-width: unset is applied to prevent the two CSS properties from fighting each other.

Custom Properties

Override column behaviour per-instance without new attributes:

Property Default Description
--column-min-width 38ch Minimum column width for auto mode
--column-gap var(--size-2xl) Gap between columns

Spacing Rules

Vertical rhythm matches layout-text:

Context Spacing
Default (between elements)var(--size-m)
Before h2var(--size-2xl)
Before h3var(--size-xl)
Before h4/h5/h6var(--size-l)
After any headingvar(--size-s)
Before/after figures and prevar(--size-l)

Best Practices

  • Prefer auto over explicit counts — let the browser choose. Use explicit counts only in known-width containers.
  • Use data-layout-align="justify" with multi-column — ragged-right lines disrupt column rules in multi-column layouts.
  • Pair with article[data-prose] — layout-columns handles flow, article handles typographic quality (hyphenation, limits).
  • Don't nest inside layout-text — use one or the other. They serve the same rhythm role.

Related