How to layout list items in groups

Tags: html,css,css3

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    

---

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/