Erste Schritte zu einem möglichen CSS-Masonry-Layout

Es hat nicht die gleiche Nachfrage wie beispielsweise Container-Abfragen, aber die Möglichkeit, "Masonry"-Layouts in CSS zu erstellen, ist seit langem ein großer Wunsch von CSS-Entwicklern. Masonry ist die Art von Layout, bei der Elemente mit ungleichen Größen in unregelmäßigen Reihen angeordnet werden. So ähnlich wie eine typische Ziegelwand, die seitlich gedreht ist.

Das Layout allein ist bereits allein mit CSS realisierbar, aber mit einer großen Einschränkung: Die Elemente sind nicht in Reihen, sondern in Spalten angeordnet, was für viele ein Ausschlusskriterium ist.

/* People usually don't want this */

1  4  6  8
2     7
3  5     9

/* They want this *.

1  2  3  4
5  6     7
8     9

Wenn Sie diese unregelmäßige Reihenanordnung und die horizontale Quellreihenfolge wünschen, sind Sie im JavaScript-Bereich. Bis jetzt, denn Firefox hat dies unter einem Feature-Flag eingeführt in Firefox Nightly, als Teil von CSS Grid.

Mats Palmgren:

Eine Implementierung dieses Vorschlags ist jetzt in Firefox Nightly verfügbar. Sie ist standardmäßig deaktiviert. Sie müssen also about:config aufrufen und die Präferenz layout.css.grid-template-masonry-value.enabled auf true setzen, um sie zu aktivieren (geben Sie "masonry" in das Suchfeld auf dieser Seite ein, und Sie sehen diese Einstellung).

Jen Simmons hat bereits einige Demos erstellt

Ist das wirklich ein Grid?

Ein wenig Gegenwind von Rachel Andrew…

Grid ist nicht Masonry, denn es ist ein Grid mit strengen Zeilen und Spalten. Wenn man sich das von Masonry erzeugte Layout noch einmal ansieht, haben wir keine strengen Zeilen und Spalten. Typischerweise haben wir definierte Zeilen, aber die Spalten verhalten sich eher wie ein Flex-Layout oder Multicol. Der Hauptunterschied zwischen dem Layout, das man mit Multicol erhält, und einem Masonry-Layout ist, dass bei Multicol die Elemente spaltenweise angezeigt werden. Typischerweise möchte man in einem Masonry-Layout, dass sie zeilenweise angezeigt werden.

[…]

Persönlich bin ich kein großer Fan davon, dass dies Teil der Grid-Spezifikation ist. Es ist auf den ersten Blick sicherlich überzeugend, aber ich denke, dies ist ein relativ spezieller Layout-Modus und eigentlich gar kein Grid. Es ähnelt eher dem Flex-Layout als dem Grid-Layout.

Indem wir diese Layout-Methode in die Grid-Spezifikation aufnehmen, befürchte ich, dass wir uns dann verpflichten, die Masonry-Funktionalität mit allen anderen Ergänzungen zu Grid unterstützen zu müssen.

Nichts davon ist bisher endgültig, und es gibt aktuelle Diskussionen in der CSS Working Group darüber.

Wie Jen sagte

Dies ist eine experimentelle Implementierung – die als *mögliche* CSS-Spezifikation diskutiert wird. Sie ist NOCH NICHT offiziell und wird sich wahrscheinlich ändern. Schreiben Sie keine Blogbeiträge, in denen Sie sagen, dass dies definitiv eine Sache ist. Es ist keine Sache. Noch nicht. Es ist ein Experiment. Ein Prototyp. Wenn Sie Gedanken dazu haben, beteiligen Sie sich unter der CSSWG.

Houdini?

Beim letzten Mal, als über natives Masonry gesprochen wurde, wurde die Idee gemischt, dass die CSS Layout API, als Teil von Houdini, dies tun könnte. Das ist eine Sache, wie Sie sehen können, wenn Sie diese Demo (Repo) in Chrome Canary öffnen.

Ich bin nicht ganz auf dem neuesten Stand, ob Houdini dafür gedacht ist, dass Ideen wie diese im Browser prototypisiert und letztendlich aus Houdini herausgenommen werden können, oder ob die Ideen einfach in Houdini bleiben sollen, oder was.