Using CSS3 multi-column layouts to split a list into columns

At least once a year I’m given a design mock that contains a list that has been split into columns. I’ve always wondered if it’s possible to do it using the CSS3 column layout module and it turns out that it’s easy! Just use the column-count CSS property on the <ul> to specify how many columns you want and the browser does it all for you:

  1. <ul style="column-count: 5;">
  2.  <li>item 1</li>
  3.  ..
  4.  <li>item 100</li>
  5. </ul>

If you’re more worried about the width of the columns, you can specify a minimum column-width instead and the browser will work out how many columns it should display:

  1. <ul style="column-width: 250px;">
  2.  <li>item 1</li>
  3.  ..
  4.  <li>item 100</li>
  5. </ul>

See example.

Why’s this exciting?

Once the browser support is there, this will be much simpler and less fragile than using methods like floats. This is telling the browser what you want, rather than how to do it. There won’t be issues with items of different heights getting caught on the bottom of longer elements. There will be no overflow issues. It won’t affect the flow of the rest of the document.

Controlling this purely through style makes responsive design easy, just set up different column rules for different displays or use the column-width to let the browser make the decision itself.

You also end up with an element that will easily go into any space of the structure of the page. This is great even if you’re not interested in responsive design because it makes it easy to tweak the structure without having to change the elements that contain the contents inside.

Browser support

Browser support is good in the latest version of all browsers but still (in March 2012) prefixed. It’s only supported in IE10+. Backwards compatibility is good, if you don’t mind falling back to the content rendered without the columns. There is at least one polyfill.

Right now there are some issues with bullets. I noticed in Chrome, the <li> loses its bullet when you split the <ul> across multiple columns. IE10 shows bullets only in the first column.

You can work around this by moving the bullet inside the li using list-style-position: inside.

Posted on 17 Mar 13 by Helen Emerson (last updated on 20 Mar 13).
Filed under CSS