How to break a html list into colums

Question

Just wondering if a html list could be break into columns based in its positions (using css and/or jquery)

Let say I want to create as many columns as (TOTAL-ITEMS/3).

Then in this list I will get 2 columns.

<ul id="list-1" >
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>
</ul>

In this one I'll get 3 columns.

<ul id="list-1">
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>

  <li>item in third column</li>
  <li>item in third column</li>
  <li>item in third column</li>
</ul>

Since the list is generated by a CSM I can not add custom classes nor id.

Considering X the width of the element containing the list, you can give X/3 width to each `

score 5 · Accepted Answer · edited May 23 '17 at 12:14

5

Absolutely you can add columns like so:

ul {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Jsfiddle Demo

Column-count @ MDN

However, CSS cannot detect the number of li to apply a specific number of columns. You would have to determine that some other way.

There is a JQuery technique as follows:

Credit to this SO Question

$(document).ready(function() {
    var numitems =  $("#myList li").length;    
    $("ul#myList").css("column-count",numitems/3);
    $("ul#myList").css("-webkit-column-count",numitems/3);
    $("ul#myList").css("-moz-column-count",numitems/3);

});

JSfiddle Demo 2

edited May 23 '17 at 12:14

Community

1
1

answered May 27 '15 at 10:08

Paulie_D

107,962
13
142
161

Do you think the jquery technique would be a good fallback for old browsers? – JPashs May 27 '15 at 11:26
I'm no expert on Jquery (I had to do a search to find the previous answer) but I see no reason why not. – Paulie_D May 27 '15 at 11:27
Thanks. I will try it. – JPashs May 27 '15 at 12:29

score 0 · Answer 2 · answered May 27 '15 at 10:10

0

Just add column-count: 3; to your unordered list

answered May 27 '15 at 10:10

Friendly Crook

1,188
1
10
13

@Paulie_D: sorry you were first – Friendly Crook May 27 '15 at 10:11

score 0 · Answer 3 · answered May 27 '15 at 10:30

May I help you.

$(function() {
  var count = $("#list-1 li").length;
  var x = Math.ceil($(count)[0]/3);
  $("#list-1").css({"-webkit-column-count": ''+x, 
                    "-moz-column-count": ''+x,
                    "column-count": ''+x});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list-1">
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>

  <li>item in third column</li>
  <li>item in third column</li>
  <li>item in third column</li>
  
  <li>item in fourth column</li>
</ul>

How to break a html list into colums

3 Answers3