Ansätze für ein CSS-Masonry-Layout

Masonry-Layout, im Web, bedeutet, dass Elemente ungleicher Größe so angeordnet werden, dass keine ungleichen Lücken entstehen. Ich würde vermuten, dass der Begriff für das Web von David DeSandro geprägt (oder zumindest populär gemacht) wurde, wegen seiner beliebten JavaScript-Bibliothek Masonry, die es seit 2010 gibt.

JavaScript-Bibliothek. Nichts gegen JavaScript, aber es ist verständlich, dass wir uns für Layoutzwecke nicht darauf verlassen wollen. Gibt es heutzutage etwas, das wir direkt in CSS tun können? So ungefähr.

Ist vertikale Reihenfolge mit unebenen unteren Rändern in Ordnung?

Wenn ja, dann sind CSS-Spalten gut genug.

Flexbox kann auch vertikale Spalten mit unebenen Enden

Aber es ist nicht ganz so clever, da Sie eine Höhe einstellen müssen, um das Umbrechen der Spalten zu erreichen. Sie müssen auch explizit Breiten angeben, anstatt es die Spalten für Sie entscheiden zu lassen.

Aber es ist machbar und die Abstände werden automatisch verteilt, wenn Platz vorhanden ist.

Brauchen Sie eine saubere Unterkante? Eine Flexbox/JavaScript-Kombination kann helfen.

Jamie Perkins schrieb dies ursprünglich, dann hat Janosh Riebesell es umgeschrieben und jetzt portiere ich es hierher.

Es durcheinanderbringt die Reihenfolge komplett und erfordert, dass die Kinder bezüglich ihrer Höhe flexibel sind, aber es funktioniert.

Ist horizontale Linien-Masonry in Ordnung?

Wenn es nur um den unebenen ziegelsteinartigen Look geht, den Sie suchen, dann ist horizontales Masonry viel einfacher. Sie könnten wahrscheinlich sogar Dinge fluten, wenn Ihnen der zerklüftete Rand egal ist. Wenn Sie es als Block behalten wollen... Flexbox mit erlaubt flex-grow ist die Lösung.

Man würde denken, CSS Grid könnte helfen

CSS Grid ist sehr erstaunlich und nützlich im täglichen Leben eines CSS-Entwicklers, aber es ist nicht wirklich für Masonry-ähnliche Layouts konzipiert. CSS Grid dreht sich darum, Linien zu definieren und Elemente entlang dieser Linien zu platzieren, während Masonry davon handelt, Elemente dort enden zu lassen, wo sie liegen, aber dennoch einen gewissen Positionsbezug auszuüben.

Balázs Sziklai hat ein schönes Beispiel für automatisch fließende Grids, die alle schön zusammen gestapelt sind, *mit ziemlich guter horizontaler Anordnung*.

Aber man sieht, wie streng die Linien sind. Es gibt jedoch einen Weg!

Grid + JavaScript-manipulierte Zeilenbereiche

Andy Barefoot hat einen großartigen Leitfaden dazu geschrieben. Der Trick besteht darin, wiederholende Grid-Zeilen einzurichten, die ziemlich kurz sind, die Elemente nach Belieben horizontal im Grid fallen zu lassen und dann ihre Höhen mit einiger ziemlich leichter Mathematik anzupassen, um zu berechnen, wie viele Zeilen sie überspannen sollen.

Rahul Arora ging diesen Weg ebenfalls.

Beides ist ziemlich cool, da die DOM-Reihenfolge und die visuelle Reihenfolge sinnvoll sind.

Ordnungsverschobene Elemente in einem Flexbox-Layout

Normalerweise, wenn Sie darüber nachdenken, order zu verwenden, um Dinge in einem Flexbox- oder Grid-Layout zu verschieben, bewegen Sie sich auf gefährlichem Terrain, da die Tabulatorreihenfolge wahrscheinlich der DOM-Reihenfolge folgt, die nicht mehr mit der erwarteten Tabulatorreihenfolge übereinstimmt, weil sich visuell Dinge verschoben haben. In dieser Demo von Diederik van Leeuwen wird order verwendet, um etwas zu machen, das als spaltenorientierte Flexbox beginnt, aber mit etwas cleverem JavaScript zu einer horizontalen Ordnung manipuliert wird.

DOM-verschobene Elemente in einem CSS-Spaltenlayout

Was die Leute im Allgemeinen wollen, ist eine Spaltenstapelung (unterschiedliche Höhen der Elemente), aber mit horizontaler Anordnung. Die letzte Grid-Demo oben bewältigt dies ziemlich gut, aber es ist nicht die einzige Methode.

Jesse Korzan hat es mit CSS-Spalten angegangen. Es benötigt auch JavaScript, um es zu erledigen. In diesem Fall verschiebt es die Elemente im DOM, um sie von links nach rechts anzuordnen, während es eine horizontale Stapelung mit einem CSS-Spaltenlayout bereitstellt. Dies führt zu einem kleinen Barrierefreiheitsproblem, da die visuelle Reihenfolge (links nach rechts) und die Quellreihenfolge (oben nach unten) sehr unterschiedlich sind – obwohl dies vielleicht mit programmatischem tabindex behoben werden kann?

Es gibt auch die ursprüngliche Bibliothek und Variationen

Schwimmen Sie davon, meine Hübschen.

Und es gibt die neuere, hippere Version: Colcade!

Und hier ist MagicGrid, bei dem ein Flexbox-Layout mit einer JavaScript-Bibliothek leicht manipuliert wird.

CSS Houdini!

Houdini ist in verschiedene APIs unterteilt, die zu unterschiedlichen Zeiten veröffentlicht werden. Die Paint- und Typed OM APIs sind am weitesten fortgeschritten, aber es gibt einige Unterstützung für die Layout API, was unglaublich aufregend ist, da es Möglichkeiten wie Masonry-Layouts eröffnet.flex-gro

Hier ist eine Demo von Google.