Veröffentlicht: 23. Juli 2025, zuletzt aktualisiert: 13. Februar 2026
Die Teams von Microsoft Edge und Google Chrome freuen sich, ankündigen zu können, dass CSS-Masonry ab Chrome und Edge 140 für frühe Entwicklertests bereit ist.
Da es noch offene Fragen zur CSS-Masonry-Spezifikation und ‑Syntax gibt, ist Ihr Feedback entscheidend, um die endgültige Form der API festzulegen. Probieren Sie die Funktion aus und teilen Sie uns Ihre Meinung mit.
CSS Masonry in Chromium testen
So testen Sie CSS Masonry:
- Verwenden Sie Chrome oder Edge 140 oder höher (oder einen anderen Chromium-basierten Browser mit einer entsprechenden Version).
- Öffnen Sie
about:flagsin einem neuen Tab. - Suchen Sie nach „CSS Masonry Layout“.
- Aktivieren Sie das Flag.
- Starten Sie den Browser neu.
Wenn die Funktion aktiviert ist, können Sie sie in Aktion sehen, indem Sie sich die Microsoft Edge-Demos ansehen (Quellcode der Demos). Sie können auch weiterlesen, um mehr über die Funktion und die verfügbare Syntax zu erfahren.
Was ist ein Mauerwerkslayout?
CSS-Masonry ist ein Layoutmodus, mit dem Sie Elemente wie Ziegelsteine anordnen können. Das ist mit CSS-Grid, Flexbox oder einem mehrspaltigen Layout nicht so einfach möglich.
Mit CSS-Masonry können Elemente in einem Spalten- oder Zeilenformat angeordnet werden, wobei die Elemente in diesen Spalten oder Zeilen minimiert platziert werden.
Stellen Sie sich das Mauerwerk wie eine Autobahn vor, bei der die einzige Einschränkung die Anzahl und die Größe der verschiedenen Fahrspuren ist. Innerhalb der Spuren können Fahrzeuge eine beliebige Länge haben und versuchen immer, so nah wie möglich an ihr Ziel zu kommen, also an den Anfang des Masonry-Layouts.
Die Layoutelemente sind nur in eine Richtung eingeschränkt und können sich in der anderen Richtung frei entfalten, unabhängig von anderen Elementen in der Nähe. Masonry unterscheidet sich von Grid dadurch, dass die Tracks nur in eine Richtung definiert sind.
Bei Masonry ist die visuelle Reihenfolge der Elemente weniger wichtig als das endgültige Design. Mit Masonry können Sie den verfügbaren Platz optimal nutzen, unabhängig davon, welche Elemente Sie haben. Das macht es zu einer guten Wahl für Seiten, die visuell intensiv sind und bei denen die visuelle Reihenfolge der Inhalte nicht so wichtig ist wie das Endergebnis.
Ein interessanter Aspekt von Masonry ist, dass Elemente wie bei Grid auch mehrere Tracks umfassen können. In diesem Fall werden die Elemente weiterhin so platziert, dass möglichst viel des verfügbaren Platzes ausgefüllt wird.
Dieses Verhalten bei der automatischen Platzierung kann zu sehr interessanten Ergebnissen führen, die Webdesigner schon lange zu erreichen versuchen. Ein Beispiel finden Sie in der Demo zur Fotogalerie von New York City. Dort wird gezeigt, wie Fotos kompakt in mehreren Spalten angezeigt werden können, während bestimmte Elemente (in diesem Beispiel der Titel) über mehrere Spalten hinweg dargestellt werden können:
Hier sind einige weitere Beispiele dafür, wofür Mauerwerk verwendet werden kann.
Ein Bloglayout, in dem das Thumbnail und die Beschreibung jedes Beitrags angezeigt werden.
Eine Nachrichtenseite, auf der Artikel in Spalten angezeigt werden, wobei einige Artikel breiter als andere sind und Hero-Images die gesamte Breite der Seite einnehmen.
Eine Sammlung von Fotos mit unterschiedlichen Spaltengrößen, wobei sich bestimmte Fotos über mehrere Spalten erstrecken.
Problemumgehungen und ihre Einschränkungen
Wenn Sie dieses Designmuster heute im Web implementieren möchten, müssen Sie entweder JavaScript-Bibliotheken oder Problemumgehungen mit CSS-Grid, Flexbox oder mehreren Spalten verwenden. Dies kann jedoch auch Nachteile haben, darunter:
- Schlechtere Leistung: Wenn ihr euch auf JavaScript-Bibliotheken oder benutzerdefinierten Code verlasst, um CSS-Masonry nachzuahmen, müsst ihr Leistungseinbußen in Kauf nehmen, was zu einer negativen Nutzererfahrung führen kann.
- Höhere Codekomplexität:
- Es ist schwierig, die richtige Platzierung von Elementen und die Verteilung des Platzes innerhalb des CSS-Rasters, der Flexbox oder mehrerer Spalten zu gewährleisten, um ein CSS-Masonry-Layout nachzuahmen.
- Die Handhabung bestimmter Funktionen, wie z. B. Elemente, die sich über mehr als eine Spalte oder Zeile erstrecken, die benutzerdefinierte Sortierung von Elementen oder die Anpassung an den Darstellungsbereich, kann ebenfalls zu Komplexität und Einschränkungen führen.
- Höherer Wartungsaufwand: Komplexer benutzerdefinierter CSS- oder JavaScript-Code ist schwieriger zu verwalten.
Das CSS-Grid ist ein hervorragender Layoutmodus, der sehr flexibel ist und mit dem Sie viele verschiedene Layoutstile erstellen können, sei es für eine ganze Webseite, eine Komponente oder nur zum Ausrichten einzelner Elemente. Es hat jedoch nicht die gleichen Eigenschaften wie Mauerwerk.
Im CSS-Grid sind die Zeilen und Spalten fest definiert und Elemente können nur innerhalb der Grid-Zellen existieren. Wenn Sie versuchen, Elemente entlang einer der Achsen zu packen, die Elemente aber nicht in die entsprechenden Zellen passen, müssen Sie sich entscheiden, ob Sie Lücken zwischen den Elementen lassen oder sie so strecken, dass der leere Platz gefüllt wird.
Genau wie bei Masonry geht es bei Flexbox nur um eine Richtung. Die Elemente entscheiden, wie viel Platz sie in der anderen Richtung einnehmen möchten. Das bedeutet, dass Sie mit Flexbox ein Layout erstellen können, das wie ein Mauerwerkslayout aussieht, solange Sie damit einverstanden sind, dass die Elemente in Blockrichtung, also Spalte für Spalte, angeordnet werden. Der Flex-Container benötigt außerdem eine definierte Blockgröße oder Höhe, damit die Elemente in eine neue Flex-Zeile umgebrochen werden und so eine neue Spalte entsteht.
Mit dem mehrspaltigen Layout können Sie auch ein Layout erstellen, das wie ein Mauerwerk aussieht. Dabei werden die Elemente ebenfalls in Spalten angeordnet. Außerdem können Sie bei mehreren Spalten nicht jede Spalte unterschiedlich groß machen. Sie sind alle gleich groß, während Masonry viel Flexibilität bei der Definition der Spalten bietet, in denen die Elemente angeordnet werden.
Der Punkt, den Sie sich hier merken sollten, ist nicht, dass Grid, Flexbox oder mehrspaltige Layouts schlechter sind als Masonry. Diese Layouts sind sehr nützlich und haben viele Anwendungsfälle. Der Punkt ist: Wenn Sie ein Masonry-Layout möchten, ist CSS-Masonry die richtige Wahl.
Der Status von CSS-Masonry
Die CSS-Arbeitsgruppe entwirft die Masonry-Spezifikation in der CSS Grid Level 3-Spezifikation. Die Spezifikation befindet sich noch in der Entwicklung und enthält vorübergehend zwei verschiedene vorgeschlagene Syntaxen. Die erste verwendet ein neues Keyword für die Property display, während bei der zweiten Masonry direkt in das CSS-Grid-Layout integriert ist.
„display: masonry“ verwenden
Mit dieser Syntax wird CSS-Masonry als eigener display-Typ eingeführt. Weitere Informationen zum Ansatz und zur Motivation finden Sie im Blogpost Feedback needed: How should we define CSS masonry? des Google Chrome-Teams sowie im restlichen Abschnitt dieses Beitrags. Der aktuelle Prototyp in Chromium basiert auf diesem Vorschlag.
display: grid; grid-template-*: masonry;
In dieser Syntax ist CSS-Masonry direkt in CSS-Grid integriert. Der Masonry-Modus wird ausgelöst, indem das Schlüsselwort masonry auf die Definition grid-template-columns bei einem zeilenbasierten Masonry-Layout oder auf die Definition grid-template-rows bei einem spaltenbasierten Masonry-Layout angewendet wird.
Weitere Informationen zu diesem Vorschlag und den Gründen dafür finden Sie im WebKit-Beitrag Help us choose the final syntax for Masonry in CSS.
Eine Alternative zu diesem Vorschlag ist die item-pack-Eigenschaft und das Schlüsselwort collapse, die CSS-Masonry auslösen würden, anstatt eine der beiden Grid-Template-Eigenschaften zu verwenden.
Seit der Veröffentlichung der Beiträge der Chrome- und WebKit-Teams hat die CSSWG die Diskussionen über die allgemeine Syntax fortgesetzt, die weiterverfolgt werden soll. Ihr Feedback kann dazu beitragen, die Weiterentwicklung dieser Foren zu unterstützen.
Weitere Informationen zum aktuellen Stand der Diskussionen finden Sie unter Problem 11593, in dem die aktuellen Diskussionsthemen zur Masonry-Syntax beschrieben werden, und unter Problem 11243, in dem die bisherige Syntaxdebatte zusammengefasst wird.
Eigenes CSS-Masonry-Layout erstellen
Lassen Sie uns ein CSS-Masonry-Layout erstellen.
Obwohl die Syntax für CSS-Masonry noch diskutiert wird, kann unsere Implementierung der Funktion bereits heute in Chromium getestet werden. Aktivieren Sie dazu das Flag „CSS Masonry Layout“, wie unter CSS-Masonry jetzt testen beschrieben. Die folgenden Beispiele zeigen, was in der Entwicklervorschau verfügbar ist.
Masonry-Container erstellen
Wenn Sie Ihren ersten spaltenbasierten Masonry-Container erstellen möchten, verwenden Sie display:masonry und definieren Sie die Spaltengrößen mit grid-template-columns. Da masonry-direction standardmäßig auf column gesetzt ist, ist das Festlegen dieses Attributs optional.
.masonry {
display: masonry;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
Für einen zeilenbasierten Masonry-Container verwenden Sie stattdessen display:masonry, definieren Sie die Zeilengrößen mit grid-template-rows und legen Sie dann masonry-direction:row fest.
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
Wie Sie vielleicht bemerkt haben, weicht diese Syntax geringfügig vom ursprünglichen Vorschlag von Google ab. Unabhängig vom Trigger, der für CSS Masonry verwendet wird, hat die CSS Working Group beschlossen, die Eigenschaften für die Größenanpassung und Platzierung von Rastervorlagen im CSS Masonry-Layout wiederzuverwenden.
Dies ermöglicht zwar eine bessere Wiederverwendung von Attributen zwischen Layouttypen, kann aber verwirrend sein. Wir freuen uns über Feedback zu diesem Thema. Wir könnten allgemeinere Aliasse für Attribute wie grid-template-columns und grid-template-rows erstellen, z. B. template-columns oder template-rows, die sowohl für Grid als auch für Masonry verwendet werden könnten.
Standard-Trackgröße verwenden
Ein neuer Displaytyp bietet die Möglichkeit, die Standardeinstellungen für Unterkünfte zu überdenken.
Im Raster sind grid-template-columns und grid-template-rows standardmäßig auf none festgelegt, was nach der aktuellen Definition normalerweise zu einer einzelnen Spalte oder Zeile führt. Bei Masonry würde diese Standardeinstellung meist zu einem unerwünschten Layout führen.
Die Implementierung in Chromium fügt die neu vorgeschlagene Definition für none hinzu, die die Standard-Trackgröße in CSS-Masonry ersetzt. Diese neue Standard-Trackgröße ist der Wert repeat(auto-fill, auto). Mit diesem Wert wird ein schönes Mauerwerkslayout erstellt, ohne dass überhaupt Spurgrößen definiert werden müssen:
.masonry {
display: masonry;
gap: 10px;
}
Wie in der Abbildung zu sehen ist, werden im Masonry-Container so viele Spalten mit automatischer Größe erstellt, wie in den verfügbaren Platz passen.
Bei CSS-Grids werden alle Elemente platziert, bevor die Größe der Tracks festgelegt wird. Das bedeutet, dass diese Definition der automatischen Größenanpassung von Tracks nicht möglich ist. Mit CSS-Masonry gilt diese Einschränkung jedoch nicht mehr, da Platzierung und Größenanpassung miteinander verknüpft und vereinfacht sind. Da diese Einschränkung aufgehoben wurde, können wir eine nützlichere Standardgröße für Tracks für Masonry-Layouts bereitstellen.
Kurzschreibweise masonry ausprobieren
Wie bereits erwähnt, basiert die aktuelle Implementierung in Chromium auf den grid-template-*-Eigenschaften, um den Masonry-Track in Ihrem Layout zu definieren.
Da Masonry jedoch nur eine Dimension hat, haben wir auch die Kurzschreibweise masonry implementiert. Damit können Sie sowohl die Masonry-Richtung als auch die Track-Definition in einem Schritt definieren, ohne die verwirrende Eigenschaft mit dem Präfix grid-.
Mit den folgenden beiden Code-Snippets werden beispielsweise gleichwertige CSS-Masonry-Container erstellt.
.masonry {
display: masonry;
masonry: "a a b" 50px 100px 200px row;
}
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: 50px 100px 200px;
grid-template-areas: "a" "a" "b"
}
Die Kurzschreibweise masonry wird noch von der CSS-Arbeitsgruppe diskutiert. Probieren Sie es gleich aus und teilen Sie uns Ihre Meinung mit.
Benutzerdefinierte Trackgrößen verwenden
Bei der Definition von Spurgrößen ist Masonry genauso flexibel wie Grid und ermöglicht es Ihnen, die Anzahl und Größe der Layoutspuren genau abzustimmen. Masonry-Tracks müssen auch nicht alle dieselbe Größe haben, zum Beispiel:
.masonry {
display: masonry;
masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}
In diesem Beispiel definieren wir zwei erste 3rem-Tracks, gefolgt von einer variierenden Anzahl von 5rem-Tracks und einem einzelnen 12rem-Track.
Mehrere Tracks umfassen
In Masonry-Layouts müssen Elemente nicht auf die Tracks beschränkt sein, in denen sie platziert sind, da sie bei Bedarf mehrere Tracks umfassen können. Das kann sehr nützlich sein, wenn einige Elemente wichtiger sind als andere und mehr Platz benötigen.
Beispiel:
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.important-item {
grid-column: span 2;
}
Sie können diese Funktion auch verwenden, um mehrere Tracks zu überspannen und bestimmte Elemente über die gesamte Länge des Containers zu erstrecken:
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.full-bleed {
grid-column: 1 / -1;
}
In der Demo der Nachrichtenseite wird damit die Abo-Anzeige in den Artikeln eingeblendet.
Feinabstimmung der Platzierung von Masonry-Elementen
In CSS Masonry werden Elemente in der Spalte oder Zeile platziert, die die kürzeste Laufposition hat.
Stellen Sie sich einen zweispaltigen Masonry-Container vor. Wenn der Container ein 110 px hohes Element in der ersten Spalte und ein 100 px hohes Element in der zweiten Spalte hat, wird ein drittes Element in der zweiten Spalte platziert, wo es 10 px näher am Anfang der Masonry-Richtung liegt.
Wenn Sie einen Unterschied von 10 Pixeln in der Laufposition für Ihren Fall als klein genug erachten und das dritte Element stattdessen in der ersten Spalte platzieren möchten, um die Quellreihenfolge besser abzubilden, verwenden Sie die Property item-tolerance.
Mit dem neuen Attribut item-tolerance wird die Empfindlichkeit bei der Platzierung von Elementen gesteuert.
Im vorherigen Beispiel können Sie item-tolerance: 10px; auf Ihren Container anwenden, um die Variabilität bei der Elementplatzierung anzupassen:
.masonry {
display: masonry;
masonry: 200px 200px;
gap: 10px;
item-tolerance: 10px;
}
In der Spezifikation wird dieses Attribut als item-slack bezeichnet. Die CSS Working Group hat vor Kurzem beschlossen, stattdessen den Namen item-tolerance zu verwenden. Die Spezifikation wird demnächst aktualisiert.
Weitere verfügbare Unterkünfte
Sie können dieselben Vorlagengrößen- und Platzierungseigenschaften verwenden, um Elemente in der Rasterachse eines Masonry-Containers zu dimensionieren und zu platzieren, wie bei CSS Grid, z. B. grid-row, grid-column, grid-area, grid-template-areas oder order.
Nutzen Sie die volle Leistungsfähigkeit des CSS-Rasters, wenn Sie Ihr Masonry-Layout erstellen.
Bitte um Feedback
Wir freuen uns darauf, dass ihr CSS-Masonry ausprobiert, kreativ werdet und die neuen Möglichkeiten entdeckt, die es euch bietet. Am besten fängst du damit an, dir unsere Demos und den zugehörigen Quellcode anzusehen und dann eigene Beispiele in Chromium zu erstellen. Vergiss nicht, zuerst das Flag zu aktivieren.
Ihr Feedback ist wichtig, um die API zu gestalten und zu prüfen, ob sie Ihren Anforderungen im Web entspricht. Probieren Sie das Masonry-Layout aus und lassen Sie uns wissen, was Sie davon halten.
Wenn ihr Feedback zur API habt, könnt ihr einen Kommentar zu Problem 11243 hinterlassen. Wenn ihr lieber einen Beitrag in eurem eigenen Blog oder in den sozialen Medien verfassen möchtet, könnt ihr uns auf X oder LinkedIn Bescheid geben.
CSS-Masonry wird in Chromium noch implementiert. Wenn Sie es testen, beachten Sie, dass wir noch aktiv daran arbeiten und es möglicherweise nicht immer wie erwartet funktioniert. Zu den aktuellen Einschränkungen gehören unter anderem die dichte Packung, die umgekehrte Platzierung, die Unterstützung von Subgrids, die Unterstützung von Out-of-Flow, die Unterstützung von Baselines, die Unterstützung von DevTools, die Unterstützung von Fragmentierung und die Unterstützung von Gap-Dekorationen.
Wenn Sie beim Testen der Funktion einen Fehler finden, können Sie uns Feedback geben, indem Sie einen neuen Chromium-Fehler melden.