Masonry Layouts mit Isotope

zur Website von Isotope

CDN Link
https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js

Masonry mit gutter von 15px initialisieren

JavaScript
jQuery(document).ready(function ($) {
    var $grid = $(".grid").imagesLoaded(function () {
        // init Isotope after all images have loaded
        $grid.isotope({
            itemSelector: ".grid-item",
            percentPosition: true,
            masonry: {
                gutter: 15,
            },
        });
    });
});

Formel für die Berechnung der Calc Weiten eines einzelnen Grid Items

100% / Anzahl Spalten = weite%
gutter Weite * (Anzahl Spalten – 1) / Anzahl Spalten = – pxWert

CSS
.grid-item {
    width: calc(weite% - pxWert);
}

Beispiel 5 Spalten und ein Gutter von 15px

100% / 5 = 20%
15 * (5 – 1) / 5 = 12px

CSS
.grid-item {
    width: calc(20% - 12px);
}

Vordefinierte grid-item widhts

CSS
// gutter: 10
width: calc(20% - 8px);
width: calc(25% - 7.5px);
width: calc(33.33% - 6.6px);
width: calc(50% - 5px);

// gutter: 15
width: calc(20% - 12px);
width: calc(25% - 11.25px);
width: calc(33.33% - 10px);
width: calc(50% - 7.5px);

// gutter: 20
width: calc(20% - 16px);
width: calc(25% - 15px);
width: calc(33.33% - 13.33px);
width: calc(50% - 10px);

// gutter: 25
width: calc(20% - 20px);
width: calc(25% - 18.75px);
width: calc(33.33% - 16.66px);
width: calc(50% - 12.5px);

// gutter: 30
width: calc(20% - 24px);
width: calc(25% - 22.5px);
width: calc(33.33% - 20px);
width: calc(50% - 15px);