Multi-column Layout

Multi-column layout flows content into newspaper-style columns — text continues from the bottom of one column to the top of the next. It's ideal for long lists, link directories, footers and masonry-style image walls.

Creating columns

column-count sets a fixed number of columns. column-gap sets the space between them.

Responsive columns with column-width

column-width sets an ideal minimum width; the browser fits as many columns as possible. On a phone you get one column, on a wide screen several — with no media queries. The columns shorthand combines both: columns: 12rem 4 means "at least 12rem wide, at most 4 columns".

Column rules and spanning

Controlling breaks

break-inside: avoid stops an element being split across two columns. break-before and break-after force or avoid breaks around elements. These properties also control page breaks when printing.

A simple masonry wall

Images of different heights pack tightly into columns. The catch: items are ordered top-to-bottom down each column, not left-to-right across rows — fine for decorative galleries, but not for content where order matters.

When not to use columns

• Long body text in multiple columns forces readers to scroll down, back up, and down again on screens shorter than the content. Keep columns for short content or lists.
• For layouts where items must align in rows, use Grid; for a single row, use Flexbox.

Try it yourself