How to output HTML list in columns with different height?

Question

With the following HTML, what is the easiest method to display the list as two columns? First column must have custom height. Second column will depend on the height of the first

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Desired display:

or if you reduce height of first column:

Can I ask, what have you tried in order to get this working? — M. Ferguson, Feb 07 '18 at 16:45
ul {-webkit-columns: 2;} or li {float: left; width: 50%;} But in this case the columns have the same height — ironfist, Feb 07 '18 at 17:03

score -2 · Answer 1 · answered Feb 07 '18 at 16:52

Best way is to filter your ul list :

$('ul').filter(function(){
    return this.childNodes.length > 5
}).addClass('twoColumns');

and add class to separate if number of element superior to your value :

 ul.twoColumns {
      list-style: none;
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }

How to output HTML list in columns with different height?

1 Answers1