Каменная кладка не заполняет пространство при фильтрации

Question

Я сделал макет, который отфильтровывается по щелчку.

По какой-то причине, когда выбраны некоторые из кнопок, макетная кладка плавает влево и складывает все элементы выше eachother вместо заполнения контейнера. Я не знаю, почему это происходит, по изотопу это хорошо с:

$grid.isotope({ layoutMode: 'masonry' }) 

масонство не кажется, что это LayoutMode встроенными, и я не могу использовать Изотоп для этого проекта.

Я не уверен, где я неправильно, вот codepen: http://codepen.io/H0BB5/pen/ORVBzm

расположение идеально подходит для «посмотреть все» и «поздравления», но не за «спасибо».

Edit: Я заметил, что причиной «поздравления», заполняющая пространство потому, что первые две сетки элемента в HTML, есть класс 'поздравлениями. Это должно каким-то образом заставлять макет заполнять горизонтально, а не вертикально. Все еще не нашли исправления.

Answer 1

В итоге я выяснил проблему. Если у кого-то еще такая же проблема, я нашел свое решение, прочитав документацию дальше.

<div class="grid"> 
    <!-- .grid-sizer empty element, only used for element sizing --> 
    <div class="grid-sizer"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item grid-item--width2"></div> 
    ... 
</div> 

/* fluid 5 columns */ 
.grid-sizer, 
.grid-item { width: 20%; } 
/* 2 columns wide */ 
.grid-item--width2 { width: 40%; } 
// use outer width of grid-sizer for columnWidth 
columnWidth: '.grid-sizer', 
itemSelector: '.grid-item', 
percentPosition: true 

сейчас работает ручка: http://codepen.io/H0BB5/pen/ORVBzm