CSS — Multiple Columns

Text flows like a newspaper

columns splits text content into parallel streams — content fills the first column, then the next:

.article {
    columns: 3;               /* three equal columns */
    column-gap: 32px;
}

Key mental model

Unlike grid/flex (which place ITEMS), multicol balances flowing TEXT across columns automatically. You don't assign content to columns.

The two syntaxes

.article { column-count: 3; }     /* exact number of columns      */
.article { column-width: 220px; } /* ideal width, count adapts    */
.article { columns: 3 220px; }    /* shorthand: both as guidance  */

With column-width, narrow screens get fewer columns automatically — built-in responsiveness for free.

Separators and gaps

.article {
    column-gap: 2rem;
    column-rule: 1px solid #ddd;   /* vertical line between columns */
}

Keeping content together

Text fragments split awkwardly mid-element. Control it:

.article h2 {
    column-span: all;         /* heading crosses full width */
}

blockquote,
img {
    break-inside: avoid;      /* don't slice these across columns */
}

Property	Effect
column-span: all	element escapes into full width
break-inside: avoid	keep whole
widows / orphans	minimum lines carried over

Readability guardrails

Columns only work when they're SHORT:

/* Good: shortish side-by-side content */
.features { columns: 2; column-gap: 3rem; }

/* Bad: 10 columns of body text = horizontal eye gymnastics */

Rules of thumb:

1. Body text: 2–3 columns max, on wide screens only
2. Column height should stay under ~2 screenfuls, or readers get lost scrolling up-down-up
3. Under ~600px width, collapse to one column via media query or rely on column-width auto-adaptation

Where multicol beats grid/flex

• Long-form reference lists (glossaries, FAQs)
• Card decks of small equal items with natural flow order
• Print-like article layouts

Where it doesn't: component layouts with deliberate placement — that's grid territory. Also avoid inside scrollable/animated containers (fragmentation quirks).

Mini Practice

1. Three-column glossary with a rule between columns.
2. Two-column features section that collapses to one under 700px.
3. column-width-only layout; resize and watch column count adapt.
4. Full-width headings via column-span.
5. Add break-inside guards around images/blockquotes.

Next: user interface →