Veröffentlicht: 19. September 2024, Letzte Aktualisierung: 13. Februar 2026
Die CSS Working Group hat die beiden CSS-Mauerwerk-Vorschläge in einem Spezifikationsentwurf zusammengefasst. Die Gruppe hofft, dass dies den Vergleich der beiden Produkte und die endgültige Entscheidung erleichtert. Das Chrome-Team ist weiterhin der Meinung, dass eine separate Masonry-Syntax die beste Vorgehensweise wäre. Das größte Leistungsproblem, das in unserem vorherigen Beitrag erwähnt wurde, ist zwar behoben, es gibt aber immer noch Bedenken hinsichtlich der Syntax, der Anfangswerte und der Benutzerfreundlichkeit einer Version in Kombination mit dem Raster.
Um unsere Annahmen zu testen, haben wir einige Beispiele durchgearbeitet, um zu zeigen, wie das Masonry-Layout in den einzelnen Versionen funktioniert. 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 Mauerwerk und Rasterlayout nicht dazu führt, dass die Funktion nicht mehr funktioniert. 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 hinsichtlich der potenziellen Probleme mit der Barrierefreiheit geäußert, die durch das Neuanordnen von Elementen mit Masonry entstehen. Das Problem wird auch für beide Versionen der Syntax durch das vorgeschlagene Attribut reading-flow behoben.
Einfaches Mauerwerk-Layout
So stellen sich die meisten Nutzer ein Mauerwerk-Layout vor. Elemente werden in Zeilen angezeigt. Nachdem die erste Zeile platziert wurde, werden nachfolgende Elemente in den von kürzeren Elementen verbleibenden Platz verschoben.
Mit display: masonry
Wenn Sie ein Mauerwerk-Layout erstellen möchten, verwenden Sie den Wert masonry für die Eigenschaft display. Dadurch wird ein Mauerwerk-Layout mit Spalten-Tracks erstellt, die Sie definieren (oder die durch den Inhalt definiert werden), und Mauerwerk auf der anderen Achse. Das erste Element wird am Block- und Inline-Start angezeigt (also oben links auf Deutsch). Die Elemente werden in Inline-Richtung angeordnet.
Verwenden Sie masonry-template-tracks, um Tracks zu definieren. Die Werte für die Trackliste entsprechen denen, die im CSS-Grid-Layout verwendet werden.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
Mit display: grid
Um ein Mauerwerk-Layout zu erstellen, erstellen Sie zuerst ein Rasterlayout mit dem Wert grid für die display-Eigenschaft. Definieren Sie Spalten mit dem Attribut grid-template-columns und weisen Sie grid-template-rows dann den Wert masonry zu.
Dadurch wird ein Layout mit automatisch platzierten Rasterelementen erstellt. Die Elemente in jeder Zeile werden jedoch im Mauerwerk-Layout angeordnet und neu angeordnet, um den Platz zu nutzen, der von kleineren Elementen in der vorherigen Zeile frei gelassen wurde.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
Wichtige Punkte bei der Entscheidung zwischen den beiden Optionen
Ein wichtiger Unterschied zwischen diesen Methoden besteht darin, dass Sie mit der display: masonry-Version ein Mauerwerk-Layout erhalten, auch wenn Sie keine Spuren mit masonry-template-tracks angeben. Daher ist display: masonry möglicherweise alles, was Sie benötigen.
Das liegt daran, dass der Startwert von masonry-template-tracks repeat(auto-areas, auto) ist. Beim Layout werden so viele automatisch dimensionierte Tracks erstellt, wie in den Container passen.
Umgekehrter Fluss mit Mauerwerk
Die Spezifikation enthält Möglichkeiten, die Richtung des Mauerwerksflusses zu ändern. Sie können beispielsweise den Ablauf so ändern, dass er vom Blockende an angezeigt wird.
Mit display: masonry
Erstellen Sie ein Mauerwerk-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 mit display: grid und grid-template-rows: masonry ein Mauerwerk-Layout.
Verwenden Sie dann die grid-auto-flow-Eigenschaft mit dem neuen Wert row-reverse, damit die Elemente vom Blockende des Grid-Containers aus angeordnet werden.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
Wichtige Punkte bei der Entscheidung zwischen den beiden Optionen
Die display: masonry-Version ähnelt der Funktionsweise von Flexbox. Mit dem Attribut masonry-direction und dem Wert column-reverse können Sie die Richtung ändern, in der Spalten angeordnet werden.
In der CSS-Grid-Version 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 erwarten, dass sie etwas anderes tun.
Mauerwerk für Zeilen
Sie können auch die Richtung ändern, um Zeilen zu definieren.
Mit display: masonry
Erstellen Sie ein Mauerwerk-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 Trackgröße angeben, da der Standardwert auto ist. Die Größe der Tracks wird also an den Inhalt angepasst.
.masonry {
display: masonry;
masonry-direction: row;
}
Mit display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
Wichtige Punkte bei der Entscheidung zwischen den beiden Optionen
Wie beim umgekehrten Ablauf bedeutet das Ändern der display: masonry-Version von Spalten in Zeilen, dass der Wert von masonry-direction geändert wird. Bei der Rasterversion müssen Sie die Werte der Attribute grid-template-columns und grid-template-rows tauschen. Wenn Sie die Kurzform verwenden, ändern Sie die Reihenfolge der Syntax.
Bei beiden Beispielen für den Wechselvorgang fühlt sich die display: masonry-Version intuitiver an. Es gibt eine einzelne Eigenschaft, die den Fluss steuert: masonry-direction. Sie kann einen der folgenden Werte annehmen:
rowcolumnrow-reversecolumn-reverse
Fügen Sie dann alle Größeninformationen hinzu, die für masonry-template-tracks erforderlich sind, sofern der Standardwert „auto“ nicht Ihren Anforderungen entspricht.
Wenn Sie die Richtung umkehren möchten, müssen Sie die grid-auto-flow-Property verwenden. Wenn Sie die Zeilenanordnung ändern möchten, müssen Sie den Wert der grid-template-*-Properties ändern. In der aktuellen Gridsyntax ist es auch nicht möglich, den Wert für die Gridachse nicht zu definieren. Sie müssen immer grid-template-*-Eigenschaften für die Achse angeben, die keinen Wert von masonry hat.
Elemente positionieren
In beiden Versionen können Sie Elemente explizit positionieren. Dazu verwenden Sie die zeilenbasierte Platzierung, die Sie vom Grid-Layout kennen. In beiden Versionen können Sie Elemente nur auf der Rasterachse positionieren. Das ist die Achse mit den vordefinierten Spuren. Sie können Elemente nicht auf der Achse positionieren, die das Mauerwerk-Layout erstellt.
Mit display: masonry
Das folgende CSS definiert ein Mauerwerk-Layout mit vier Spalten. Die Rasterachse sind also Spalten. Das Element mit der Klasse a wird von der ersten Spaltenzeile bis zur dritten Spaltenzeile platziert und erstreckt sich über zwei Tracks mit den neuen masonry-track-*-Eigenschaften. Dies kann auch als Kurzform von 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
Das folgende CSS definiert ein Mauerwerk-Layout mit vier Spalten. Die Rasterachse sind also Spalten. Das Element mit der Klasse a wird von der ersten Spaltenlinie bis zur dritten Spaltenlinie platziert und erstreckt sich über zwei Tracks mit den grid-column-*-Eigenschaften. Dies kann auch als Kurzform von grid-column: 1 / 3; definiert werden.
Wenn die Rasterachse Spalten sind, werden die grid-row-*-Attribute ignoriert. Wenn die Rasterachse Zeilen sind, werden die grid-columns-*-Attribute 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. In den folgenden Beispielen sehen Sie ein Raster mit zwei Spaltenlinien namens a.
Mit display: masonry
Die benannten Zeilen sind im Wert masonry-template-tracks des Tracklistings definiert. Das Element kann nach einer beliebigen 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 des Tracklistings 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 auch benannte Bereiche in beiden Syntaxen verwenden. Die folgenden Beispiele zeigen ein Raster mit drei Tracks mit den Namen „a“, „b“ und „c“.
Mit display: masonry
Die Tracks haben den Namen, der als Wert von masonry-template-areas angegeben ist. Da keine Trackgrößen definiert sind, haben alle drei die Standardgröße auto. Das Element wird im Track „a“ platziert.
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Das funktioniert sowohl für Zeilen als auch für Spalten. Der einzige Unterschied ist die masonry-direction-Property.
Mit display: grid
Für Spalten ist die Syntax im Wesentlichen identisch. Da keine Spaltengrößen definiert sind, haben alle drei standardmäßig die Größe auto. Sie müssen jedoch explizit angeben, dass die andere Achse „masonry“ ist:
.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 tatsächlich 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;
}
Wichtige Punkte bei der Entscheidung zwischen den beiden Optionen
Bei jeder Positionierung funktioniert die display: masonry-Syntax besser, wenn die Richtung geändert wird. Da die Property masonry-track-* in beide Richtungen der Rasterachse funktioniert, müssen Sie nur den Wert von masonry-direction ändern, um die Richtung zu ändern. Bei der Rasterversion benötigen Sie mindestens redundante Properties, um das Umschalten zu ermöglichen. In den vorherigen Beispielen sehen Sie jedoch, dass das Ändern der Richtung in der Rasterversion komplizierter ist.
Kurzschreibweisen
In diesem Beitrag wurden die Langformen verwendet, um deutlicher zu machen, welche Eigenschaften verwendet werden. Sowohl die display: masonry- als auch die display: grid-Versionen können jedoch mit Kurzformen definiert werden.
Mit display: masonry
Die Kurzform display: masonry verwendet das Keyword masonry. Verwenden Sie das folgende CSS, um das einfache Mauerwerk-Layout zu erstellen:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
So erstellen Sie ein einfaches zeilenbasiertes Mauerwerk-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
So erstellen Sie das einfache Mauerwerk-Layout mit der Kurzschreibweise grid.
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
So erstellen Sie ein einfaches zeilenbasiertes Mauerwerk-Layout:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
In komplexeren Beispielen können aufgrund der einfacheren display:masonry-Syntax mehr Attribute in die Kurzform gepackt werden, ohne dass sie zu komplex wird.
Angenommen, Sie erstellen drei Spalten mit den Namen „a“, „b“ und „c“, die von unten nach oben gefüllt werden.
Mit display:masonry
In display: masonry können alle drei zusammen in der Kurzform festgelegt werden:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Da die Größe automatisch angepasst wird, müssen Sie sie nicht angeben. Wenn Sie jedoch eine bestimmte Größe wünschen, können Sie diese hinzufügen. Beispiel: masonry: column-reverse 50px 100px 200px "a b c";.
Außerdem kann jede Komponente beliebig neu angeordnet werden. Es gibt keine bestimmte Reihenfolge, die Sie beachten müssen. Wenn Sie stattdessen Zeilen verwenden möchten, müssen Sie nur column-reverse durch row oder row-reverse ersetzen. Die restliche 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 im Beispiel für das Mauerwerk werden dadurch alle Spalten auf die Größe auto festgelegt. 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;
}
Oder wenn Sie „grid“ verwenden möchten, um Größen und Bereichsnamen gleichzeitig festzulegen:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
In beiden Beispielen ist die Reihenfolge unbedingt erforderlich. Wenn Sie stattdessen Zeilen haben möchten, ist sie anders. Wenn Sie beispielsweise zu Zeilen wechseln, sieht das so aus:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
Oder, um sie alle in einer Kurzform zusammenzufassen:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
Wichtige Punkte bei der Entscheidung zwischen den beiden Optionen
Die Kurzform display: masonry wird wahrscheinlich häufig verwendet, da sie relativ einfach ist. In vielen Fällen müssen Sie für ein „standardmäßiges“ Mauerwerk-Layout nur die Track-Definitionen festlegen. Alle anderen Werte können den Standardwert annehmen.
Die display: grid-Version verwendet die vorhandene Kurzschreibweise grid, die ziemlich komplex ist und unserer Erfahrung nach seltener von Entwicklern verwendet wird. Wie in den vorherigen Beispielen gezeigt, ist auch bei einfachen Mauerwerkslayouts Vorsicht geboten, wenn die Reihenfolge der Werte festgelegt wird.
Weitere Hinweise
In diesem Beitrag werden einige gängige Anwendungsfälle heute betrachtet. Wir wissen jedoch nicht, was die Zukunft für Grid- oder Masonry-Layouts bringen wird. 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, in Masonry etwas anderes zu tun als im Raster. Wir können die Standardeinstellungen für das Raster nicht ändern, wenn wir uns für die display: grid-Version entscheiden. 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 das Mauerwerk-Layout verwendet wird.
Bei grid-template-areas werden beispielsweise die meisten Werte verworfen, da ein zweidimensionales Rasterlayout definiert wird. Bei Masonry wird nur eine Richtung vollständig definiert.
Feedback geben
Sehen Sie sich diese Beispiele und den Spezifikationsentwurf an, in dem die einzelnen Versionen nebeneinander dargestellt sind. Teilen Sie uns Ihre Meinung mit, indem Sie einen Kommentar zu Problem 9041 hinterlassen. Wenn Sie lieber einen Beitrag in Ihrem eigenen Blog oder in sozialen Medien schreiben möchten, teilen Sie uns dies bitte auf X oder LinkedIn mit.