CSS Multiple Columns

Optional Advanced just covered image sprites — one sheet, many tiles. This session is a different optional tool: multiple columns. Think of a newspaper, not a toolbar. You ask CSS to pour a long article into two or three vertical streams. You are not placing independent cards on a Grid.

Direct answer

CSS multi-column layout splits one block of flowing content into newspaper-style columns. You set how many columns (column-count), a preferred column width (column-width), the gutter (column-gap), and an optional vertical rule (column-rule). Text, lists, and inline content fill the first column, then the next. Use it for long copy. For navigation, card decks, and page shells, stay with Flexbox or Grid so each box stays a whole unit.

Why columns exist

Long lines are hard to read. Magazines solved that with several shorter columns on one page. CSS copied the idea for the web: one element, one text stream, automatic wrapping into columns. That is different from Flexbox (a row or column of items) and Grid (a two-dimensional map of areas). Multi-column is a fragmentation tool — the browser may split a paragraph across a column boundary unless you tell it not to.

Count: “I want three columns”

column-count asks for a number. The browser divides the container’s width among that many columns (minus gaps):

On a wide article, you get three streams. On a very narrow phone, three skinny columns become unreadable — pair this with a media query, or prefer column-width so the count can drop when space is tight.

Width: “each column about this wide”

column-width is a hint, not a locked pixel cage. The browser creates as many columns of at least that width as will fit:

If the box is ~48rem plus gaps, you may see three columns; if it shrinks, you may see two, then one. That is usually calmer than a fixed column-count: 3 on every viewport. You can set both: count is a maximum, width is a minimum comfort size. The columns shorthand is column-width then column-count, for example columns: 16rem 3.

Gap and rule

Columns need breathing room. column-gap is the gutter. column-rule draws a thin line in that gutter (width, style, color — like a border, but it does not take extra layout space the way a box border does):

Shorthands exist (column-rule-width, column-rule-style, column-rule-color). Keep the rule subtle; it is a newspaper divider, not a second design system.

A heading that spans

A title often should sit across the full width, then the columns start underneath. column-span: all on a child does that:

Only none and all are in everyday use. Span is for a heading, a lead figure, or a callout — not for every paragraph.

Keep boxes from splitting

A card, a figure with a caption, or a quote can look broken if the column break cuts it in half. break-inside: avoid asks the browser to keep that box in one column when it can:

Also useful: break-before / break-after in print-like flows, and the older page-break-inside: avoid as a fallback in dusty browsers. You will not win every fight — very tall boxes still overflow — but captions staying with images is the usual goal. column-fill: balance (often the default in CSS columns) tries to even out column heights; auto fills the first column first (more like a newspaper jump).

Columns vs Flex vs Grid

The Flexbox and Grid modules already taught item placement. Multi-column does not give you justify-content or named areas. It flows one stream. If each child must stay a rectangle you can tap, use Flex or Grid.

Page chrome stays Flex or Grid

Do not turn the whole site into column-count: 3. Header, nav, and a card deck want whole boxes:

.prose may be multi-column. .card-deck should not. Mixing both on the same element is how figures get sliced and buttons land in the wrong stream.

Narrow screens and reading order

If columns would be thinner than a comfortable line (roughly 12–16rem of text), drop to one column. Screen readers and keyboard users still follow document order, not “down one column then the next” as a visual scan — that is fine for an article, awkward if you used columns to fake a dashboard of unrelated widgets. In RTL languages, columns still fill according to the writing mode; the rule sits in the gutter either way.

Try it yourself

1. Wrap a few paragraphs in .prose and set column-count: 2 plus a column-gap.
2. Switch to column-width: 16rem and resize the window — watch the count change.
3. Add column-rule: 1px solid in a quiet gray.
4. Put an <h2> with column-span: all.
5. Wrap a figure in break-inside: avoid. Then try the same CSS on a card grid and notice why Flex/Grid is calmer there.

Common mistakes

• Using multi-column as a card gallery or whole-page layout
• Forcing column-count: 3 on phones so lines hold three words
• Forgetting column-gap so streams glue together
• Letting images and captions split across a column break
• Treating columns as Flex: there is no flex-grow for a column stream
• Confusing this with image sprites — sprites crop a background; columns fragment text

Summary

• Multi-column pours one flowing stream into newspaper columns
• column-count sets a number; column-width sets a comfortable minimum; you can combine them
• column-gap and column-rule style the gutter; column-span: all for titles
• break-inside: avoid keeps figures and callouts whole when possible
• Flex and Grid still own page chrome and card decks
• Optional Advanced continues next with masking (masking)