How to layout list items in groups

css, html

Solution

you can use css3 `column-count` property for this:

Write like this:

.colWrap {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
    -webkit-column-width:20px;
    -moz-column-width:20px;
}
li {
    display:inline;
}
div{
    width:120px;
}

Check this http://jsfiddle.net/rJTGJ/2/

Problem

Let's say we have a html list like this: ``` <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> ... <li>10</li> </ul> ``` How to, using css and/or java script, make a browser show it like this (in groups of four, with some margin between the groups): ``` 1 2 5 6 9 10 3 4 7 8 ```

Original source