CSS Looping layout columns

css, html

Solution

Use this CSS:

li {
    display: inline
}

li:nth-child(3n):after {
    content: '\a';
    white-space: pre;
}

Demo: http://jsfiddle.net/3UN4f/1/

First i make the list items inline, then the `\a` inserts a line break. Here is the specification for that: http://www.w3.org/TR/CSS2/syndata.html#strings. `nth-child` is CSS3: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Problem

I have a list like this: ``` <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> .... etc .... </ul> ``` Instead of it ending up like ``` A B C D E ... ``` I'd like for it to end up in columns like this: ``` A B C D E F G H I .... etc (ordered alphabetically) ``` If I had to do this in a server side language, I'd do something like create three arrays, one for each column, and loop through each item, placing it in the correct column, but is there an easier way to do it with CSS3? Many thanks!

Original source