Заполнение пустых пространств в элементе списка

У меня есть подвижная сетка (по высоте и ширине). LI всегда прямоугольные и адаптируются к размеру экрана.

Теперь мне нужно заполнить списки, чтобы все они имели одинаковую высоту. Это было бы легко, если бы все столбцы имели один элемент LI. Но есть столбцы двойного размера, и некоторые из них могут содержать LI большого размера. В некоторых случаях есть даже пустые места в середине столбца, потому что там большое Li, маленькое, а сразу после него снова большое.

На некоторых страницах с контентом все li находятся в одном столбце.

В каждом случае ли перемещаются влево. Я сделал несколько изображений, чтобы объяснить проблему:

Сначала я хотел посчитать ребенка и сравнить их. Но это усложняется, когда все LI находятся в одном столбце или когда LI отсутствует в середине столбца.

Это то, что я пробовал:

var longest = 0

$("ul.grid-col").each(function(){
    var liCount, $that = $(this);
    liCount = $that.find("> li").length;

    if ($that.is(".double")){
       if( $that.find("li.big").length ){
          var bigCount = $that.find("li.big").length
          liCount = (liCount - bigCount) + (bigCount * 4) //because one big has the size of 4 small one 
       }
     liCount = liCount / 2

    }

    if ( longest < liCount ){
       longest = liCount
    }
})

Теперь я знаю, сколько LI мне нужно, чтобы заполнить пустое поле. пространства, их довольно легко заполнить. Но как мне узнать, есть ли в середине буквы пустое место? с? И как бы вы справились с особым случаем одного столбца?