Columns

19 Feb 2019 in the articles section Updated: 25 Mar 2024

With one short line of CSS you can turn any block level element into columns.

div { column-count: 4; }

Produces:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque fugiat nostrum iste sint accusantium nam dolor architecto odit, ex, nemo dicta molestiae dolorum saepe consectetur ipsa quasi iure, soluta doloremque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis recusandae excepturi voluptas, officia iure vel itaque quas doloremque dolorum. Dolores odio eum soluta eveniet, illo officia debitis alias voluptatem eos numquam aliquam corporis mollitia.

Nobis ducimus facilis a maiores vel soluta, illum doloribus ipsa quibusdam quaerat tempora quasi consequatur est, molestias aperiam modi hic nemo atque voluptates mollitia minus eos magni nesciunt. Magni, perspiciatis.

Ab, nostrum veniam explicabo ipsum id corporis error quo aperiam nam est temporibus, nisi dolorem quibusdam vel nihil sed soluta cumque culpa dolore possimus? Assumenda vero sint aperiam culpa ad.

Quos dolorem minima, esse velit, perferendis quia voluptates tenetur aspernatur alias libero reprehenderit itaque dolor at nisi corrupti voluptate praesentium! Tempora, dignissimos sint excepturi facilis ea recusandae necessitatibus rerum culpa!

(Note: Also needed to set the first paragraph's top margin to zero here.)

Columns:

Another short bit of syntax is simply:

div { columns: 100px 3; }

This combines two properties: column-width first then the column count.

BEWARE these are not fixed values. The column-width property is a minimum value. That means with a small viewport the columns won't collapse beyond that size. And the column count is a maximum value. A value of 3 means there will never be more than 3 columns.

According to CSS Tricks:

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.

Ab, nostrum veniam explicabo ipsum id corporis error quo aperiam nam est temporibus, nisi dolorem quibusdam vel nihil sed soluta cumque culpa dolore possimus? Assumenda vero sint aperiam culpa ad.

You can also set column-rule. This is the equivalent to the combined border properties and has values for line thickness, type of line and it's color.

div { column-rule: 1px solid; }

Along with an increased gap—column-gap: 50px—we get:

Ab, nostrum veniam explicabo ipsum id corporis error quo aperiam nam est temporibus, nisi dolorem quibusdam vel nihil sed soluta cumque culpa dolore possimus? Assumenda vero sint aperiam culpa ad.

In this version the header should span the columns. This feature is unsupported in Firefox currently.

Here's a Heading spanning all the columns

Ab, nostrum veniam explicabo ipsum id corporis error quo aperiam nam est temporibus, nisi dolorem quibusdam vel nihil sed soluta cumque culpa dolore possimus? Assumenda vero sint aperiam culpa ad.