Mauerwerk Layout nicht gefüllt, wenn gefiltert

Question

Ich habe ein Mauerwerk Layout, das auf Klick gefiltert wird.

Wenn einige der Schaltflächen ausgewählt sind, schwebt das Mauerwerk aus irgendeinem Grund nach links und stapelt alle Objekte übereinander, anstatt den Container zu füllen. Ich bin mir nicht sicher, warum dies geschieht, der auf Isotop es ist in Ordnung mit:

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

Mauerwerk scheint nicht diesen Layoutmodus eingebaut zu haben, und ich kann Isotopen für dieses Projekt nicht verwenden.

Ich bin nicht sicher, wo ich falsch bin dabei, hier ist ein codepen: http://codepen.io/H0BB5/pen/ORVBzm

das Layout ist perfekt für ‚Alle anzeigen‘ und ‚Glückwünsche‘, aber nicht für ‚Danke‘.

bearbeitet: bemerkte ich, dass die Ursache für ‚Glückwünsche‘ den Raum füllt, da die ersten beiden Gitterpunkte der in dem HTML-Code die ‚Glückwünsche‘ Klasse. Dies muss irgendwie dazu führen, dass das Layout horizontal und nicht vertikal gefüllt wird. Habe noch keine Lösung gefunden.

Answer 1

Ich endete das Problem herauszufinden. Wenn jemand anderes das gleiche Problem hat, fand ich meine Lösung durch Lesen der Dokumentation weiter.

<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 

jetzt arbeiten Stift: http://codepen.io/H0BB5/pen/ORVBzm