Dividing Long List of <Li> Tags into Columns

Dividing long list of li tags into columns?

In CSS3 this is possible.

#columns {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

HTML:

<div id="columns">
  <ul>
... lots of lis ...
  </ul>
</div>

The list items will spill over into the next column as they exceed the height of the container.

Perhaps for older browser you could use JavaScript, as this seems to be more aesthetic than a critical feature.

Is there a way to break a list into columns?

The CSS solution is: http://www.w3.org/TR/css3-multicol/

The browser support is exactly what you'd expect..

It works "everywhere" except Internet Explorer 9 or older: http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

See: http://jsfiddle.net/pdExf/

If IE support is required, you'll have to use JavaScript, for example:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Another solution is to fallback to normal float: left for only IE. The order will be wrong, but at least it will look similar:

See: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

You could apply that fallback with Modernizr if you're already using it.

How to divide list in a single ul into 3 columns

ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

How to split a list in two columns after specific element?

You can use column-count to decide how many columns you want your ul to have.

.columns {
  width: 150px;
  column-count: 2;
}

<div class="columns">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</div>

Split ul into two columns if li is greater than 5 using pure CSS

If you are able to use CSS grid you can do this with grid-template and grid-auto-flow directive:

.list {

  display: grid;

  grid-template-rows: repeat(5, min-content);

  grid-auto-flow: column;

}

<ul class="list">

  <li class="item">1</li>

  <li class="item">2</li>

  <li class="item">3</li>

  <li class="item">4</li>

  <li class="item">5</li>

  <li class="item">6</li>

  <li class="item">7</li>

</ul>

List divide into multiple columns

CSS3 columns should be the optimal choice (update: also flexbox), but unfortunately has not a wide support yet. You can achieve the same result with simple 2d-transforms (available also on IE9)

See http://jsfiddle.net/79rtx/1/

Basically all list-items are floated, the unordered list is rotated by -90deg. and list-items rotated by 90deg.

---

Relevant css

div { 
    border   : 1px green solid; 
    /* use easyclearing on div (or this workaround) */
    overflow : auto; 
    height   : auto;
}

/* clear */
ul + * { clear: both; }

ul {
   float : left;
   height : 160px; /* (30 + 2px) * 5 */ 

   -webkit-transform : rotate(-90deg);
   -moz-transform : rotate(-90deg);
   -ms-transform : rotate(-90deg);
   -o-transform : rotate(-90deg);
   transform : rotate(-90deg);
}

li:nth-child(5n+1) { clear: right; }

li {
   width      : 30px;
   height     : 30px;  
   float      : right;
   margin     : 1px;
   background : #ccc;

   -webkit-transform-origin : 50% 50%;
   -moz-transform-origin : 50% 50%;
   -ms-transform-origin : 50% 50%;
   -o-transform-origin : 50% 50%;
   transform-origin : 50% 50%;

   -webkit-transform : rotate(90deg);
   -moz-transform : rotate(90deg);
   -ms-transform : rotate(90deg);
   -o-transform : rotate(90deg);
   transform : rotate(90deg);
}

Split list of li into column with javascript/jQuery

Just loop it forward. The being slower relates to not caching the array's length. However, you do cache the upper bound of the for-loop in colCount. Don't worry about performance, just do the loop the right way around. Let it count forward.

---

Related Topics