Multi-column Layout

Multi-column Layout

Text flows into multiple side-by-side columns, like a newspaper.

columns

Set the number (or width) of columns:

article {
  columns: 3;                 /* three equal columns */
  columns: 200px;             /* as many 200px columns as fit */
}

The longhand pair

article {
  column-count: 2;
  column-gap: 40px;           /* space between columns */
  column-width: 300px;        /* target width */
}

Column rules

A vertical divider between columns:

article {
  columns: 3;
  column-rule: 2px solid #bbb;   /* like a border */
}

Spans

Let an element break across all columns:

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

Rough estimates

TL;DR

• columns: 3 gives newspaper columns.
• Keep readable: aim for 45-75 characters per line.
• column-rule adds a divider.
• Perfect for long text blocks and quote walls.