Viele Pagebuilder bieten mittlerweile die Möglichkeit Grids (z.B. Blog-Beiträge) auch im “Masonry”-Format darzustellen. Dabei werden die Höhen der einzelnen Elemente nicht angepasst, es kommt zu keinen unschönen Lücken.

Der große Haken daran? Alle Pagebuilder verwenden JavaScript, um den gewünschten Effekt zu erreichen. Entweder selbst programmiert, oder der Klassiker unter den Masonry-Scripten wird eingebunden….

Der Nachteil ist klar: ein extra JavaScript-File wird geladen, der PageSpeed-Wert leidet, deine Website wird langsamer.

Die Lösung wäre nativer Masonry-Support im Browser, allerdings ist das Feature noch als “experimentell” gekennzeichnet und der Support der Browser lässt zu wünschen übrig (siehe Can I use).

Die Lösung?

Ich nenne sie ja “poor man masonry”, aber es klappt einwandfrei mit nur einem kleinen Haken: CSS Columns.

Laut Can I use mit perfektem Browser-Support und einfach zu verwenden.

Hier ein Beispiel um drei Spalten darzustellen:

CSS
.columns-2 {
    --column-gap: 2rem;
    columns: 3;
    gap: var(--column-gap);
    
    & > * {
        break-inside: avoid;
        height: fit-content;
        margin-block-end: var(--column-gap);
    }
}

Da die CSS-Eigenschaft “gap” nur zwischen den Spalten, aber nicht zwischen den Elementen an sich (die ja untereinander angeordnet sind) gilt, sind noch ein paar Extra-Einstellungen für alle Kind-Elemente notwendig:

  • break-inside: verhindert, dass mitten im Kind-Element (meist eine “Card”) umgebrochen wird.
  • height: passt die Höhe an den Inhalt an.
  • margin-block-end: stellt sicher, dass auch zwischen den “Zeilen” der korrekte Abstand dargestellt wird. Als CSS-Variable, damit sich der Wert zentral ändern lässt.

Responsive ist schlicht die Anzahl der “columns” zu ändern.

Nun noch kurz zum oben angesprochenen kleinen Haken? Idealerweise sollte bei einem Masonry-Layout die Reihenfolge in Leserichtung bzw. Zeilen verlaufen… Bei 3 Spalten sollte also 1-2-3 in der ersten Zeile stehen und 4-5-6 darunter:

1 - 2 - 3

4 - 5 - 6

Bei CSS “columns” hingegen ist die Reihenfolge anders:

1   3   5
|   |   |
2   4   6

Wenn dies (z.B. bei einer Bildergalerie) aber keine Rolle spielt ist dies eine Möglichkeit ein Masonry-Layout ohne externe Bibliotheken, ohne Einfluss auf die Ladezeit und ohne Auswirkungen auf den Pagespeed zu erstellen. Großartig.

Kanntest du diese Möglichkeit? Was ist deine liebstes unbekanntes CSS-Feature? Hinterlass mir gerne einen Kommentar.