How to make a multicolumn unordered list?

Question

I'm trying to create a list of items that would look like this:

Main requirement is that the list should be flexible in a way that it's possible to add or remove list items without touching the code.

The best solution I found so far is to put all list items (including headers) into the <li> tags and style them with one of the techniques presented in this A List Apart article:

<ul>
  <li class="header">Drinks</li>
  <li>Drink 1</li>
  <li>Drink 2</li>
  <li>Drink 3</li>
  <li class="header">Meat</li>
  <li>Meat 1</li>
  <li>Meat 2</li>
  <li>Meat 3</li>
  <li>Meat 4</li>
  <li>Meat 5</li>
  <li>Meat 6</li>
  etc.
</ul>

I was wondering if there are some better suggestions here on Stack Overflow.

Answer 1

Probably the only way you can achieve this cleanly (without javascript) is using the column-count CSS property. IE only supports it from 10+ though: http://caniuse.com/multicolumn

Here's a demo: http://jsbin.com/efiqov/2/

Also, headers should be headers, not list items.