CSS: how to make a list wrap vertically?

Question

I have a somewhat long list and want it to "wrap" into vertical columns. Say I have a list of 10 items and I want it to be 5 items per column, the layout should be like this:

1   6
2   7
3   8
4   9
5   10

Is there a way to do this in CSS?

Answer 1

Sorry, it's actually super simple:

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

Check out this DEMO

Answer 2

Use CSS3 columns. In particular, if you set column-width, it should make as many columns as necessary. If you want it to prefer going down rather than giving each column an equal number amount of items, you can set column-fill to auto.