TorK TorK - 1 year ago 93
CSS Question

CSS/html display list in two columns if more than X amount of elements?

I have a dynamic list of elements.
I do not want this list to be too long.
I could use:

ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;

But this always results in two columns. I would prefer to only have one column if there are only a few elements in the list.
So with 5 elements or less, I want this:


But with 6 or more elements I want this:

1 4
2 5
3 6

I use css3, html, bootstrap 2.3.2 and jquery
Do anyone have some tips for the best way to do this?

Answer Source

You could simply filter ul element(s):

    return this.childNodes.length > 5
ul.twoColumns {
  list-style: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
<script src=""></script>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download