Multi-column text in CSS

Newspaper columns, where the browser does the balancing.

.notes {
  columns: 3 18rem;
  column-gap: 2rem;
  column-rule: 1px solid #e5e7eb;
  column-fill: balance;
}

.notes h2 {
  column-span: all;
  margin-block: 1.5rem 0.5rem;
}

.notes .card {
  break-inside: avoid;
  margin-block-end: 1rem;
}

How it works

1. columns is the shorthand for a count and an ideal width.
2. column-fill: balance evens the columns out; the default is to fill.
3. break-inside: avoid keeps a card from being split across a column.

Keywords and builtins used here

• card
• columns
• notes
• px
• rem

The run, in numbers

Lines

16

Characters to type

225

Tokens

57

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 40 seconds.

Type this snippet

Step 3 of 3 in Sizing, step 16 of 24 in Flexbox & grid.

← Previous Next →