Masonry-Layout: CSS- und JS-Ansätze

Ein Masonry-Layout platziert Elemente in Spalten, wobei jedes Element den nächsten verfügbaren vertikalen Platz ausfüllt, ähnlich wie bei Pinterest. Die Spalten sind gleich breit, die Elemente unterschiedlich hoch. Das Ergebnis ist ein dichtes, visuell dynamisches Grid ohne ungenutzten Leerraum zwischen den Zeilen.

Chrome und Firefox unterstützen hinter einem Flag grid-template-rows: masonry. Die Elemente werden in Spalten platziert, aber die Zeilen an ihre Inhaltshöhe angepasst, sodass Elemente mit variabler Höhe lückenlos angeordnet werden können. Dies ist die zukünftige native Lösung.

CSS-Spalten erzeugen ein Masonry-ähnliches Layout: columns: 3; column-gap: 1rem. Die Elemente fließen automatisch innerhalb jeder Spalte von oben nach unten. Einschränkung: Die Elemente werden spaltenweise angeordnet (oben in Spalte 1, oben in Spalte 2 …), nicht zeilenweise, was sich auf Lesereihenfolge und Barrierefreiheit auswirkt.

Verhindern Sie, dass Elemente über Spalten hinweg geteilt werden: break-inside: avoid bei jedem Element. Ohne diese Einstellung kann eine hohe Karte auf zwei Spalten verteilt und der Inhalt halbiert werden. Fügen Sie dies bei der Verwendung von CSS-Spalten für kartenartige Inhalte immer hinzu.

Masonry.js (von David DeSandro) positioniert absolut positionierte Elemente neu, indem es Spaltenhöhen berechnet und jedes Element in der kürzesten Spalte platziert. Isotope erweitert dies um Sortieren und Filtern. Beide benötigen JavaScript, um Positionen zu berechnen und anzuwenden.

Ein leichtgewichtiger Ansatz: Definieren Sie ein Grid mit festen Spalten und 1-Pixel-Zeilen und verwenden Sie dann JS, um bei jedem Element abhängig von seiner Inhaltshöhe bzw. Zeilenhöhe grid-row-end: span N festzulegen. Die Elemente behalten ihre Ausrichtung an den Grid-Zeilen bei und erreichen dennoch variable Höhen.

Masonry-Positionen werden veraltet, wenn sich die Fenstergröße ändert oder Bilder geladen werden. Verwenden Sie ResizeObserver, um Größenänderungen zu erkennen und eine Neuberechnung auszulösen. Entprellen Sie Neuberechnungen, um bei schnellen Größenänderungen übermäßigen Rechenaufwand zu vermeiden.

Bilder mit unbekannter Höhe führen dazu, dass Masonry nach dem Laden neu berechnet wird. Geben Sie bei allen Bildern explizite Attribute für Breite und Höhe an, damit der Browser vor dem Laden Platz reserviert. Dadurch werden Positionsverschiebungen verhindert und die Anzahl der Neuberechnungen verringert.

Das Anhängen von Elementen an ein Masonry-Layout erfordert nur die Neuberechnung der betroffenen Spalten (der neuen Elemente), nicht des gesamten Grids. Bibliotheken wie Masonry.js unterstützen Animationen für angehängte Elemente und ein inkrementelles Layout ohne vollständige Neuanordnung bei jedem neuen Stapel.

Die visuelle Reihenfolge eines Masonry-Layouts unterscheidet sich bei per JavaScript positionierten Layouts von der DOM-Reihenfolge. Stellen Sie sicher, dass die Tab-Reihenfolge der DOM-Reihenfolge (der logischen Lesereihenfolge) und nicht der visuellen Position folgt. Setzen Sie tabindex sorgfältig ein oder verlassen Sie sich bei der Tastaturnavigation auf den natürlichen DOM-Fluss.

CSS-Spalten: einfach, ohne JS, aber mit spaltenweiser statt zeilenweiser Lesereihenfolge und ohne Filtern oder Sortieren. Grid-Masonry: derzeit noch nicht produktionsreif unterstützt. JS-Masonry: voll ausgestattet, erhöht jedoch den Aufwand und verursacht eine Verzögerung beim Rendern, da die Positionen erst nach dem Laden der Inhalte berechnet werden.

Welche CSS-Eigenschaft verhindert, dass eine Karte über zwei CSS-Spalten hinweg geteilt wird?

Ein Masonry-Layout lässt sich mit CSS-Spalten (einfach, aber spaltenweise angeordnet), dem experimentellen grid-template-rows: masonry (zukunftsweisend) oder JavaScript-Bibliotheken wie Masonry.js (voll ausgestattet mit Sortieren und Filtern) umsetzen. Jeder Ansatz bringt Kompromisse zwischen Einfachheit, Barrierefreiheit und Funktionsumfang mit sich.