CSS column-count elements jumping across columns

Question

I\'m trying to get a dynamic amount of elements to show across 5 elements using CSS3 column-count, but when I expand the list item heights on hover, it occasion

Answer 1

You could as well, find out how much space remains in the last col and fill it to even the columns.

DEMO codepen \0/ DEMO fiddle from yours.

The jQuery added :

var col = 5; // number of columns
var liH =50; // average height ol li, including margins
var nbli = $('ol li').length; // how many do we have ?
var olH = nbli*liH; // total height of ol
var colnbli = Math.ceil(nbli/col); // how many li would it make if each column is fully filled ?
var colH = colnbli*liH; // what's average height of each col 
var ceilOlH= colH*col; //what's total height of columns together
var olH = nbli*liH; // what's real height of ol ?
var fixLiH = ceilOlH - olH; // how much difference do i have ?
var fixcol  =  $('
').appendTo('ol'); // let's see if we can fill the remaining gap

and the CSS

li:hover ~li:last-child {
  margin-top:-10px ;
  display:block
}

To match with animate and avoid jumping lis , add a transition to li for the margin:

ol li {
  display:inline-block;
  margin: 5px 10px;
  transition:0.5s;/* to match jQuery animate */
}

---

Add/remove