Codectionary / Developer documentation / CSS

Flowing Text into Multiple Columns

Multi-column layout flows one continuous content stream down columns, similar to a newspaper. The columns shorthand can request an ideal width and a maximum count. It is different from Grid, where separate items occupy explicit cells.

Syntax

.story { columns: 14rem 2; column-gap: 2rem; column-rule: 1px solid; }

Examples

Flowing Text into Multiple Columns: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.story { columns: 14rem 2; column-gap: 2rem; column-rule: 1px solid #aaa; max-width: 40rem; }
.story h1 { column-span: all; }
  1. Expected result: At adequate width, the article flows into two columns beneath a heading spanning both; at narrow widths it uses one.
  2. The ideal width prevents forcing two unreadably narrow columns.
  3. column-span: all removes the heading from ordinary column flow.
HTML used by this example

<article class="story"><h1>Library news</h1><p>The library opens at nine. Readers can borrow books, use study desks, and meet the team.</p><p>Every afternoon there is a quiet reading session. Bring a book or choose one from the shelves.</p><p>On Saturday, volunteers host a workshop for new members. All materials are supplied.</p></article>

Best practices

  • Avoid very tall columns that force repeated long scrolling.
  • Use Grid for cards that must align by rows rather than continuous prose.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading