From a UX perspective, CSS3 columns can be dangerous. People instincitively want to layout content in columns because “that’s how newspapers do it.” And it works for newspaper and magazines because their medium has a fixed width and columns help to make content more readable on a page. However, in the digital world, when a user reads to the bottom of a column they have to scroll back to the top to continue reading. That’s a bad UX.

Which has led me to wonder: when could I use CSS columns? Well, I think I’ve found my first reasonable use case for them.

Too Much Space

Responsive grids are great. The main idea behind a responsive grid is that you have a column-based grid which stacks the columns at smaller viewport widths.

Take this three column layout:

First
  • Hi, I'm list item 1
  • Hi, I'm list item 2
  • Hi, I'm list item 3
  • Hi, I'm list item 4
Second

I'm the second column

Third

And I'm the third grid column.

Given enough room, the columns stack side-by-side. At smaller viewports, your layout will look more like this:

First
  • Hi, I'm list item 1
  • Hi, I'm list item 2
  • Hi, I'm list item 3
  • Hi, I'm list item 4
Second

I'm the second column

Third

And I'm the third grid column.

…well, the columns are now stacked, but there’s a quite a bit of empty space in the First section, especially since mylicontent is very short. It’d be great if we could somehow magically spread that content across the container…

ul {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
}

Boom. CSS Columns.

First w/ CSS Cols
  • Hi, I'm list item 1
  • Hi, I'm list item 2
  • Hi, I'm list item 3
  • Hi, I'm list item 4
Second

I'm the second column

Third

And I'm the third grid column.

Combined that with a media query to drop back down to one column when your viewport gets small enough, and you’ve successfully used CSS3 columns!

NOTE CSS Columns are supported in:

So sorry, IE9 and down. My demos are going to look a little odd to you.

But in the REAL World…

OK, I cheated a bit. I used very short and simple content in my list items. When things aren’t so clean you can end up with something like this:

First w/ CSS Cols
  • Hi, I'm list item 1
  • Hi, I'm list item 2 and I'm obnoxiously long. Really, obnoxiously long.
  • Hi, I'm list item 3
  • Hi, I'm list item 4

Ouch. Nobody likes a list item that breaks across columns. It’s ok, we can fix that by giving thelia style ofdisplay: inline-block

First w/ CSS Cols
  • Hi, I'm list item 1
  • Hi, I'm list item 2 and I'm obnoxiously long. Really, obnoxiously long.
  • Hi, I'm list item 3
  • Hi, I'm list item 4

Better. Thedisplay: inline-blockprevents thelifrom breaking over columns, but we’ve lost our bullet points (which came from the default styling of anlitodisplay: list-item). But it’s cool cause we all know how to use:beforeandcontent, right?

First w/ CSS Cols
  • Hi, I'm list item 1
  • Hi, I'm list item 2 and I'm obnoxiously long. Really, obnoxiously long.
  • Hi, I'm list item 3
  • Hi, I'm list item 4

And there you have it. Nice, clean list columns with CSS. Just be sure your weary of the type/amount of content you use in columns. I swear, if I catch you using this on a list with 100 items… If the user has to scroll when you are using columns, don’t use columns.