Multi-column ul/li layout?

Question

css

Hello!
There was a task — to break the big (about 100 elements) the ul/li list into several columns. But the task doesn’t end there…
You need to do something wrong:
1 2 3
4 5 6
7 8 9
And like this:
1 4 7
2 5 8
3 6 9
Google doesn’t give out the secrets of implementing what I need – only the first option…
Tell me, please , implementation.

Answer 1

You can also come up with such a CCS3 solution:

li {
  float:left;
}
li:nth-child(3n+1) {
  clear:both;
}

Answer 2

If the list is obtained by means of an array, then it is not difficult to split the array into 3 lists, and there is no need to do anything weird. If it is static, then we simply typeset three lists of the ul type.

Answer 3

Here is a solution from Samiznaetekos studio: bit.ly/Cdsz8

Answer 4

jQuery: Split list into columns (and my comment is a must).

Answer 5

Here is a solution Creating a list in the form of blocks in several columns

Answer 6

maybe something like kenneth.kufluk.com/google/js-columns/
code.google.com/p/js-columns/
googled "jquery newspaper layout"

Answer 7

Realistic in css3, but only webkit and mozilla support multi-column layout.

Answer 8

If "validity" is important, then it remains only to break it into three separate lists. A smart option - the free use of DIV inside UL, OL and DL - has not yet been officially accepted (although it works in browsers): alas, formally only LI can still be the direct descendants of UL .

Answer 9

The other day I implemented this in XSLT. There, too, I suffered. In pure HTML, some kind of script is needed, otherwise there is no way. Or dynamically form lists from the server correctly.

Answer 10

Given a limit on the number of rows or columns?
It's easy to do with jQuery.

Answer 11

Try using flex. Here is a link to use this wonderful thing. Well, the solution above is good, using column.
Here's more goodies for you, you can see what is supported and by which browsers. It is enough to register the name of the property in the search.

Answer 12

I am using this script.