columns

Avatar of Katy DeCorah
Katy DeCorah on (Updated on )

With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.

.intro {
  columns: 300px 2;
}

The columns property will accept column-count, column-width, or both properties.

columns:  || ;

Using both column-count and column-width is recommended to create a flexible multi-column layout. The column-count will act as the maximum number of columns, while the column-width will dictate the minimum width for each column. By pulling these properties together, the multi-column layout will automatically break down into a single column at narrow browser widths without the need of media queries or other rules.

A multi-column layout works great on block elements including lists to make a flexible navigation.

To further fine tune your multi-column layout, use break-inside on specific elements to keep them from getting stuck between columns.

More information

Browser support

IEEdgeFirefoxChromeSafariOpera
10+All9+50+All11.5+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllAllAllAllAll