CSS multi-column generator — newspaper-style text columns

How to use the CSS multi-column generator

1. Set column-count from 1 to 6.
2. Set the column-gap, from 0 to 80 px.
3. For a dividing line, set Rule width above 0 and choose the Rule style and Rule colour. Width 0 removes it.
4. To make the layout responsive, set Minimum column width (0 = off), for example 220 px.
5. Keep Heading spans all columns ticked if your block starts with an h2 title, then copy the CSS.

What it does and when to use it

Multi-column layout splits one piece of content into side-by-side columns, the way newspapers and magazines do. It suits glossaries, long link lists, tag clouds, short news summaries, FAQ indexes and footers, where many small items would otherwise run down one long, narrow column.

For laying out separate cards in rows, the CSS grid generator or the flexbox generator is the better choice. To set comfortable body text inside each column, start with the typography styler.

How it works

The .columns rule uses either column-count: <n> or, when a minimum width is set, columns: <n> <width>. It adds column-gap and, if the rule width is above 0, column-rule: <width> <style> <colour>. Two helper rules follow: .columns h2 { column-span: all; } when the heading option is on, and .columns p { break-inside: avoid; } always.

MDN lists columns and column-rule as Baseline widely available since March 2017, break-inside since January 2019 and column-span since July 2020.

Worked examples

Default three columns with a rule:

.columns {
  column-count: 3;
  column-gap: 32px;
  column-rule: 1px solid #cbd5e1;
}
.columns h2 {
  column-span: all;
}
.columns p {
  break-inside: avoid;
}

A responsive link list. Count 3, minimum width 220 px, gap 24 px, no rule, heading option off: columns: 3 220px; with column-gap: 24px;. In a 500 px wide box there is room for two 220 px columns plus the gap, so you get two; in a 1,000 px box you get three.

Limits and tips

• Columns balance automatically. The browser tries to make them equal height, so the last column may be shorter than expected.
• Only paragraphs are kept whole. Add break-inside: avoid to list items, figures or cards if they should not split either.
• Nested headings other than h2 need their own column-span: all rule if they should cross all columns.