How to lay-out list items like a grid with CSS and HTML?

Question

I have a div block which does not have a fixed width.

Inside, I have an

• ..
block with 11 items. I would like these

Answer 1

The simplest solution is to use CSS columns:

http://jsfiddle.net/6tD2D/ (prefixes not included)

ul {
    columns: 3;
}


    
a
    
b
    
c
    
d
    
e
    
f
    
g
    
h
    
i
    
j
    
k

This will equalize the columns as best it can. However, if there aren't enough elements to be perfectly equal, it will start removing them from the right instead of the center.