Veröffentlicht: 19. September 2024
Die CSS-Arbeitsgruppe hat die beiden CSS-Mauerwerksvorschläge in eine Entwurfsspezifikation kombiniert. Das Team hofft, dass es so einfacher ist, die beiden zu vergleichen und eine endgültige Entscheidung zu treffen. Das Chrome-Team ist nach wie vor der Meinung, dass eine separate Masonry-Syntax die beste Lösung wäre. Das größte Leistungsproblem, das in unserem letzten Beitrag erwähnt wurde, ist zwar behoben, aber es gibt noch Bedenken hinsichtlich Syntax, Anfangswerten und der Frage, wie einfach eine Version in Kombination mit dem Raster zu erlernen ist.
Um unsere Annahmen zu testen, haben wir einige Beispiele durchgearbeitet, um zu zeigen, wie die „Mauerwerksanordnung“ bei den einzelnen Versionen funktionieren würde. Sehen Sie sich die Beispiele in diesem Beitrag an und geben Sie uns Feedback, damit wir eine Entscheidung treffen und mit dieser Funktion fortfahren können.
In diesem Beitrag werden nicht alle möglichen Anwendungsfälle behandelt. Es ist jedoch klar, dass die Trennung von „Mosaik“ und „Rasterlayout“ nicht zu einer Funktionsbeeinträchtigung führt. Tatsächlich ist möglicherweise das Gegenteil der Fall. Wie Sie in diesem Beitrag sehen werden, bietet die display: masonry-Version neue Möglichkeiten und eine einfachere Syntax.
Außerdem haben viele Entwickler Bedenken geäußert, dass die Neuanordnung von Elementen mit dem „Mauerwerk“-Layout zu Problemen mit der Barrierefreiheit führen könnte. Das wird auch für beide Versionen der Syntax durch das vorgeschlagene Attribut reading-flow berücksichtigt.
Ein einfaches Masonry-Layout
Das ist das Layout, das sich die meisten Menschen vorstellen, wenn sie an Mauerwerk denken. Die Elemente werden in Zeilen angezeigt. Nachdem die erste Zeile platziert wurde, werden nachfolgende Elemente in den durch kürzere Elemente freigelassenen Raum verschoben.
Mit display: masonry
Wenn Sie ein „Mosaik-Layout“ erstellen möchten, verwenden Sie den Wert masonry für die Eigenschaft display. Dadurch wird ein „Mosaik-Layout“ mit Spaltenbereichen erstellt, die Sie definieren (oder die vom Inhalt definiert werden) und „Mosaik“ in der anderen Achse. Das erste Element wird am Block- und Inline-Anfang angezeigt (also oben links auf Englisch) und die Elemente werden in Inline-Richtung angeordnet.
Verwende masonry-template-tracks mit den Werten für die Titelliste, die im CSS-Rasterlayout verwendet werden, um Titel zu definieren.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
Mit display: grid
Wenn Sie ein „Mosaik-Layout“ erstellen möchten, erstellen Sie zuerst ein „Raster-Layout“ mit dem Wert grid für die Property display. Definieren Sie Spalten mit der Property grid-template-columns und geben Sie dann grid-template-rows den Wert masonry.
Dadurch wird ein Layout erstellt, das Sie von automatisch platzierten Rasterelementen erwarten würden. Die Elemente in jeder Zeile verwenden jedoch ein „Masonry“-Layout und werden so neu angeordnet, dass sie den Platz einnehmen, der von kleineren Elementen in der vorherigen Zeile freigelassen wurde.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
Unterschiede zwischen den beiden Optionen
Ein wesentlicher Unterschied zwischen diesen Methoden besteht darin, dass bei der display: masonry-Version ein „Masonry“-Layout verwendet wird, auch wenn du keine Titel mit display: masonry angibst.masonry-template-tracks Daher reicht display: masonry möglicherweise aus.
Das liegt daran, dass der Anfangswert von masonry-template-tracks repeat(auto-areas, auto) ist. Das Layout erstellt so viele automatisch skalierte Tracks, wie in den Container passen.
Rückstrom mit Mauerwerk
Die Spezifikation enthält Möglichkeiten, die Richtung des Mauerwerksflusses zu ändern. Sie können beispielsweise festlegen, dass der Ablauf vom Blockende aus angezeigt wird.
Mit display: masonry
Erstellen Sie ein „Masonry“-Layout mit display: masonry und verwenden Sie dann masonry-direction mit dem Wert column-reverse.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
Mit display: grid
Erstellen Sie ein „Masonry“-Layout mit display: grid und grid-template-rows: masonry.
Verwenden Sie dann die Property grid-auto-flow mit dem neuen Wert row-reverse, damit die Elemente vom Blockende des Rastercontainers aus angeordnet werden.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
Unterschiede zwischen den beiden Optionen
Die display: masonry-Version funktioniert sehr ähnlich wie Flexbox. Ändern Sie die Richtung, in der Spalten fließen, mit der Property masonry-direction und dem Wert column-reverse.
In der CSS-Rasterversion wird grid-auto-flow verwendet. In der aktuellen Definition haben grid-auto-flow: row-reverse und grid-auto-flow: column-reverse denselben Effekt. Das kann verwirrend sein, da Sie vielleicht etwas anderes erwarten.
Mauerwerk für Zeilen
Sie können auch die Richtung ändern, um Zeilen zu definieren.
Mit display: masonry
Erstellen Sie ein „Masonry“-Layout mit display: masonry und legen Sie dann den Wert von masonry-direction auf row fest. Sofern Sie nicht möchten, dass Ihre Zeilen eine bestimmte Blockgröße haben, müssen Sie keine Spurgröße angeben, da der Standardwert auto ist. Die Größe der einzelnen Spuren richtet sich dann nach dem Inhalt.
.masonry {
display: masonry;
masonry-direction: row;
}
Mit display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
Unterschiede zwischen den beiden Optionen
Wie beim umgekehrten Ablauf bedeutet das Ändern der display: masonry-Version von Spalten zu Zeilen, dass der Wert von masonry-direction geändert wird. Bei der Rasterversion müssen Sie die Werte der Eigenschaften grid-template-columns und grid-template-rows austauschen. Wenn Sie die Kurzschreibweise verwenden, ändern Sie die Reihenfolge der Syntax.
Bei beiden Beispielen für den Navigationsfluss wirkt die Version display: masonry intuitiver. Es gibt eine einzige Eigenschaft, die den Ablauf steuert: masonry-direction. Sie kann einen der folgenden Werte annehmen:
rowcolumnrow-reversecolumn-reverse
Fügen Sie dann alle erforderlichen Informationen zur Größe zu masonry-template-tracks hinzu, sofern der Standardwert „auto“ nicht ausreicht.
Wenn Sie mit dem Raster die umgekehrte Richtung verwenden möchten, müssen Sie die Property grid-auto-flow verwenden. Wenn Sie die Zeilenanordnung verwenden möchten, ändern Sie den Wert der grid-template-*-Properties. Außerdem ist es in der aktuellen Rastersyntax nicht möglich, den Wert für die Rasterachse nicht zu definieren. Sie müssen immer grid-template-*-Eigenschaften auf der Achse angeben, die keinen Wert von masonry haben.
Elemente positionieren
In beiden Versionen können Sie Elemente mithilfe der zeilenbasierten Platzierung, die Sie vom Rasterlayout kennen, explizit positionieren. In beiden Versionen können Sie Elemente nur in der Rasterachse positionieren. Das ist die Achse mit den vordefinierten Tracks. Sie können Elemente nicht auf der Achse positionieren, die für das „Mosaik“-Layout verwendet wird.
Mit display: masonry
Im folgenden CSS-Code wird ein „Masonry“-Layout mit vier Spalten definiert. Die Rasterachse ist daher die Spalte. Das Element mit der Klasse a wird von der ersten Spaltenzeile bis zur dritten Spaltenzeile platziert und umfasst zwei Tracks mit den neuen masonry-track-*-Properties. Dies kann auch als Kurzform für masonry-track: 1 / 3; definiert werden.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
Mit display: grid
Im folgenden CSS-Code wird ein „Masonry“-Layout mit vier Spalten definiert. Die Rasterachse ist daher die Spalte. Das Element mit der Klasse a wird von der ersten Spaltenzeile bis zur dritten Spaltenzeile platziert und umfasst zwei Tracks mit den grid-column-*-Eigenschaften. Dies kann auch als Kurzform von grid-column: 1 / 3; definiert werden.
Wenn die Rasterachse Spalten ist, werden die grid-row-*-Eigenschaften ignoriert. Wenn die Rasterachse Zeilen ist, werden die grid-columns-*-Eigenschaften ignoriert.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
Sie können benannte Zeilen mit beiden Syntaxen verwenden. Die folgenden Beispiele zeigen ein Raster mit zwei Spaltenlinien namens a.
Mit display: masonry
Die benannten Zeilen sind im Wert „masonry-template-tracks“ der Titelliste definiert. Das Element kann nach jeder Zeile mit dem Namen a platziert werden.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
Mit display: grid
Die benannten Zeilen sind im Wert „grid-template-columns“ der Titelliste definiert. Das Element wird nach der ersten Zeile mit dem Namen a platziert. Wenn die Property grid-row definiert ist, wird sie ignoriert.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
Sie können in beiden Syntaxen auch benannte Bereiche verwenden. Die folgenden Beispiele zeigen ein Raster mit drei Titeln namens „a“, „b“ und „c“.
Mit display: masonry
Die Titel haben den Namen des Werts von masonry-template-areas. Da keine Titelgrößen definiert sind, haben alle drei standardmäßig die Größe auto. Das Element wird im „a“-Track platziert.
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Das funktioniert unabhängig davon, ob Sie Zeilen oder Spalten definieren. Der einzige Unterschied besteht in der masonry-direction-Eigenschaft.
Mit display: grid
Bei Spalten ist die Syntax im Wesentlichen identisch. Da keine Spurgrößen definiert sind, haben alle drei standardmäßig die Größe auto. Sie müssen jedoch explizit angeben, dass die andere Achse ein „Masonry“-Layout hat:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
Bei Zeilen muss der Wert jedoch anders geschrieben werden, da grid-template-areas eigentlich einen zweidimensionalen Bereich definiert und jede Zeile als separater String geschrieben wird:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
Unterschiede zwischen den beiden Optionen
Bei jeder Positionierung funktioniert die display: masonry-Syntax besser, wenn es um die Richtungsänderung geht. Da die Property masonry-track-* in der Richtung der Rasterachse funktioniert, müssen Sie nur den Wert von masonry-direction ändern, um die Richtung zu ändern. Bei der Rasterversion sind mindestens redundante Properties erforderlich, um das Umschalten zu ermöglichen. In den vorherigen Beispielen sehen Sie jedoch noch weitere Möglichkeiten, wie das Ändern der Richtung bei der Rasterversion komplizierter ist.
Kurzschreibweisen
In diesem Beitrag wurden die Langformen verwendet, um klarer zu machen, welche Properties verwendet werden. Sowohl die display: masonry- als auch die display: grid-Version können jedoch mit Kurzformen definiert werden.
Mit display: masonry
Für das Kürzel display: masonry wird das Keyword masonry verwendet. Verwenden Sie für das grundlegende Masonry-Layout das folgende CSS:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
So erstellen Sie ein einfaches zeilenbasiertes „Masonry“-Layout:
.masonry {
display: masonry;
masonry: row;
}
So definieren Sie Tracks und ein zeilenbasiertes Layout mit der Kurzschreibweise:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
Mit display: grid
Mit der Kurzschreibweise grid ein einfaches „Masonry“-Layout erstellen
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
So erstellen Sie ein einfaches zeilenbasiertes „Masonry“-Layout:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
In komplexeren Beispielen können aufgrund der einfacheren display:masonry-Syntax mehr Eigenschaften in die Kurzschreibweise aufgenommen werden, ohne dass sie zu kompliziert wird.
Angenommen, Sie erstellen drei Spalten mit den Namen „a“, „b“ und „c“, die von unten nach oben ausgefüllt werden.
Mit display:masonry
In display: masonry können alle drei zusammen in der Kurzschreibweise festgelegt werden:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Da die Größe automatisch festgelegt wird, müssen Sie sie nicht angeben. Wenn Sie stattdessen eine bestimmte Größe wünschen, können Sie sie hinzufügen. Beispiel: masonry: column-reverse 50px 100px 200px "a b c";.
Außerdem können die einzelnen Komponenten frei neu angeordnet werden. Es gibt keine bestimmte Reihenfolge, die Sie sich merken müssen. Wenn Sie stattdessen Zeilen verwenden möchten, müssen Sie nur column-reverse durch row oder row-reverse ersetzen. Der Rest der Syntax bleibt gleich.
Mit display: grid
In display: grid müssen diese drei Aspekte separat festgelegt werden:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Wie beim Beispiel für die Masonry-Layouts haben alle Spalten dieselbe Größe (auto). Sie können aber auch explizite Größen angeben:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Wenn Sie „grid“ verwenden möchten, um Größen und Gebietsnamen gleichzeitig festzulegen, können Sie Folgendes eingeben:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
In beiden Beispielen ist die Reihenfolge unbedingt erforderlich und würde sich ändern, wenn Sie stattdessen Zeilen verwenden würden. So sieht es beispielsweise aus, wenn Sie zu Zeilen wechseln:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
Oder in Kurzform:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
Unterschiede zwischen den beiden Optionen
Die Kurzform display: masonry wird wahrscheinlich weithin verwendet, da sie relativ einfach ist. Bei einem „Standard“-Mosaik-Layout legen Sie in vielen Fällen nur die Titeldefinitionen fest. Alle anderen Werte können die Standardeinstellungen übernehmen.
In der display: grid-Version wird die vorhandene grid-Kurzschreibweise verwendet. Diese ist ziemlich komplex und wird unserer Erfahrung nach von Entwicklern seltener verwendet. Wie in den vorherigen Beispielen gezeigt, ist auch bei einfachen „Masonry“-Layouts Vorsicht geboten, wenn Sie die Reihenfolge der Werte festlegen.
Weitere Hinweise
In diesem Beitrag werden einige gängige Anwendungsfälle für die Grid- und Masonry-Layouts beschrieben. Wir wissen jedoch nicht, was die Zukunft für diese Layouts bereithält. Ein wichtiges Argument für die Verwendung der separaten display: masonry-Syntax ist, dass sich die beiden in Zukunft unterscheiden können. Insbesondere bei Anfangswerten wie denen für masonry-template-tracks kann es sinnvoll sein, im Vergleich zum Raster etwas anderes zu tun. Wenn wir uns für die display: grid-Version entscheiden, können wir die Standardwerte für das Raster nicht ändern. Das könnte unsere Möglichkeiten in Zukunft einschränken.
In diesen Beispielen sehen Sie Stellen, an denen der Browser Eigenschaften ignorieren muss, die im Raster gültig sind, wenn „Mauerwerk“ verwendet wird.
Bei grid-template-areas werden beispielsweise die meisten Werte verworfen, da damit ein zweidimensionales Rasterlayout definiert wird. Bei „Masonry“ wird nur eine Richtung vollständig definiert.
Geben Sie uns Feedback
Sehen Sie sich diese Beispiele und auch die Entwurfsspezifikation an, in der die einzelnen Versionen nebeneinander dargestellt sind. Kommentieren Sie Issue 9041, um uns Ihre Meinung mitzuteilen. Wenn Sie lieber einen Beitrag in Ihrem eigenen Blog oder in den sozialen Medien schreiben möchten, können Sie uns auch auf X oder LinkedIn kontaktieren.