Stein auf Stein: Helfen Sie uns, CSS Masonry zu entwickeln

Patrick Brosset

Alison Maher

Veröffentlicht: 23. Juli 2025

Die Teams von Microsoft Edge und Google Chrome freuen sich, bekanntzugeben, dass CSS-Masonry ab Chrome und Edge 140 für frühe Entwicklertests bereit ist.

Da es noch offene Probleme mit der CSS-Mauerwerkspezifikation und ‑syntax gibt, ist Ihr Feedback entscheidend, um uns bei der Festlegung der endgültigen Form der API zu helfen. Probieren Sie die Funktion aus und lassen Sie uns wissen, wie sie Ihnen gefällt.

CSS Masonry in Chromium testen

So testen Sie CSS Masonry:

1. Verwenden Sie Chrome oder Edge 140 oder höher oder einen anderen Chromium-basierten Browser mit einer entsprechenden Version.
2. Rufen Sie about:flags in einem neuen Tab auf.
3. Suchen Sie nach „CSS Masonry Layout“.
4. Aktivieren Sie das Flag.
5. Starte 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 „Masonry“?

CSS-Mauerwerk ist ein Layoutmodus, mit dem Sie eine ziegelartige Anordnung von Elementen erstellen können, die mit CSS-Grid, Flexbox oder mehrspaltigem Layout nicht so einfach zu erreichen ist.

Mit CSS-Mauerwerk können Sie Elemente in einem Spalten- oder Zeilenformat anordnen, wobei die Elemente in diesen Spalten oder Zeilen zusammengefasst werden.

Stellen Sie sich das Mauerwerk als Autobahn vor, bei der die einzige Einschränkung die Anzahl und Größe der verschiedenen Fahrspuren ist. Innerhalb der Spalten können Fahrzeuge jede beliebige Länge haben. Sie versuchen immer, so nah wie möglich an ihr Ziel zu gelangen, das den Beginn des Mauerwerkslayouts darstellt.

Ihre Layoutelemente sind nur in einer Richtung eingeschränkt und können sich in der anderen Richtung frei bewegen, unabhängig von anderen Elementen in der Nähe. Das Masonry-Layout unterscheidet sich vom Grid-Layout dadurch, dass seine Spuren nur in einer Richtung definiert sind.

Bei Masonry ist die visuelle Reihenfolge der Elemente weniger wichtig als das endgültige Design. Mit dem Masonry-Layout können Sie den verfügbaren Platz optimal nutzen, unabhängig davon, welche Elemente Sie haben. Daher ist es eine gute Wahl für Seiten mit vielen visuellen Elementen, bei denen die visuelle Reihenfolge der Inhalte nicht so wichtig ist wie das Endergebnis.

Ein interessanter Aspekt von Masonry ist, dass Elemente wie beim Grid auch mehrere Spalten umfassen können. In diesem Fall werden die Elemente weiterhin so platziert, dass möglichst viel verfügbarer Platz genutzt wird.

Dieses automatische Platzierungsverhalten kann zu sehr interessanten Ergebnissen führen, die Webdesigner schon lange anstreben. Ein Beispiel finden Sie in der Demo für die Fotogalerie von New York City. Dort wird gezeigt, wie Fotos kompakt in mehreren Spalten dargestellt werden können, während bestimmte Elemente (in diesem Beispiel der Titel) über mehrere Spalten hinweg angezeigt werden:

Hier sind einige weitere Beispiele für die Verwendung von Masonry.

Ein Bloglayout mit der Miniaturansicht und Beschreibung jedes Beitrags.

Eine Nachrichtenseite, auf der Artikel in Spalten angezeigt werden. Einige Artikel sind breiter als andere und Hero-Bilder erstrecken sich über die gesamte Seitenbreite.

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 Workarounds verwenden, die CSS-Grid, Flexbox oder mehrspaltige Layouts nutzen. Dies kann jedoch auch Nachteile haben:

• Schlechtere Leistung: Wenn Sie JavaScript-Bibliotheken oder benutzerdefinierten Code verwenden, um das CSS-Mauerwerk zu imitieren, kann dies zu Leistungseinbußen führen und sich negativ auf die Nutzerfreundlichkeit auswirken.
• Höhere Codekomplexität:
  • Es ist schwierig, die richtige Platzierung von Elementen und die Verteilung des Abstands innerhalb von CSS-Grid, Flexbox oder mehrspaltigem Layout zu gewährleisten, um ein CSS-Mauerwerk-Layout zu imitieren.
  • Auch die Verarbeitung bestimmter Funktionen wie Elemente, die sich über mehrere Spalten oder Zeilen erstrecken, die benutzerdefinierte Anordnung von Elementen oder die Anpassung an den Viewport kann zu Komplexität und Einschränkungen führen.
• Höherer Wartungsaufwand: Komplexer benutzerdefinierter CSS- oder JavaScript-Code ist schwieriger zu warten.

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 dieselben Eigenschaften wie das Mauerwerk.

Im CSS-Raster sind die Zeilen und Spalten starr definiert und Elemente können nur innerhalb der Rasterzellen vorhanden sein. Wenn Sie versuchen, Elemente entlang einer der Achsen zu platzieren, die Elemente aber nicht an die jeweiligen Zellen angepasst sind, müssen Sie entscheiden, ob Sie Lücken zwischen den Elementen lassen oder sie so dehnen möchten, dass sie den leeren Bereich ausfüllen.

Wie bei Masonry wird bei Flexbox nur eine Richtung berücksichtigt. Die Elemente können selbst 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 Mauerwerk-Layout aussieht, solange Sie damit einverstanden sind, dass die Elemente blockweise, also spaltenweise, angeordnet werden. Der Flex-Container muss auch eine definierte Blockgröße oder Höhe haben, damit die Elemente in eine neue Flex-Zeile umgebrochen werden und so eine neue Spalte entsteht.

Mit „Mehrspaltig“ lässt sich auch ein Layout erstellen, das wie ein Mauerwerk aussieht. Dabei werden die Elemente wieder in Spalten angeordnet. Außerdem können Sie bei mehrspaltigen Layouts die einzelnen Spalten nicht unterschiedlich formatieren. Sie haben alle die gleiche Größe, während das Mauerwerk viel Flexibilität bei der Definition der Spalten bietet, in die die Elemente gepackt werden.

Es geht nicht darum, dass Grid-, Flexbox- oder mehrspaltige Layouts schlechter als Masonry-Layouts sind. Sie sind sehr vielseitig einsetzbar. Wenn Sie ein Mauerwerk-Layout wünschen, ist CSS-Mauerwerk die richtige Lösung.

Status von CSS-Mauerwerk

Die CSS Working Group arbeitet an einem Entwurf für die Mauerwerk-Funktion in der CSS Grid Level 3-Spezifikation. Die Spezifikation wird noch erstellt und enthält vorübergehend zwei verschiedene vorgeschlagene Syntaxen. Im ersten Beispiel wird ein neues Keyword für die display-Eigenschaft verwendet, im zweiten ist Masonry direkt in das CSS-Grid-Layout integriert.

„display: masonry“ verwenden

Mit dieser Syntax wird CSS-Mauerwerk als eigener display-Typ eingeführt. Weitere Informationen zum Ansatz und seiner Motivation finden Sie im Blogpost Feedback needed: How should we define CSS masonry? des Google Chrome-Teams sowie im restlichen Teil dieses Beitrags. Der aktuelle Prototyp in Chromium basiert auf diesem Vorschlag.

display: grid; grid-template-*: masonry;

In dieser Syntax ist CSS-Mauerwerk direkt in das CSS-Raster integriert. Der Mauerwerksmodus wird ausgelöst, indem das Keyword masonry auf die grid-template-columns-Definition bei einem zeilenbasierten Mauerwerkslayout oder auf die grid-template-rows-Definition bei einem spaltenbasierten Mauerwerkslayout angewendet wird.

Weitere Informationen zu diesem Vorschlag und seiner Motivation 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 collapse-Schlüsselwort, das CSS-Mauerwerk auslösen würde, anstatt eine der beiden Eigenschaften für die Rastervorlage zu verwenden.

Seit der Veröffentlichung von Beiträgen durch die Chrome- und WebKit-Teams hat die CSSWG die Diskussionen über die allgemeine Syntax fortgesetzt. Ihr Feedback kann uns helfen, die Entwicklung dieser Foren weiter voranzutreiben.

Weitere Informationen zum aktuellen Status der Diskussionen finden Sie unter Problem 11593, in dem die aktuellen Diskussionsthemen zur Masonry-Syntax aufgeführt sind, und unter Problem 11243, in dem die bisherige Syntaxdebatte zusammengefasst ist.

Eigenes CSS-Mauerlayout erstellen

Wir wollen uns ein bisschen austoben und ein CSS-Mauerwerk-Layout erstellen.

Die Syntax für CSS-Mauerwerk wird zwar noch diskutiert, aber unsere Implementierung der Funktion kann in Chromium getestet werden, indem Sie das Flag „CSS Masonry Layout“ aktivieren, wie unter CSS-Mauerwerk testen beschrieben. Die folgenden Beispiele zeigen, was in der Entwickler-Testversion verfügbar ist.

Mauerwerk-Container erstellen

Um Ihren ersten spaltenbasierten Masonry-Container zu erstellen, 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 leicht vom ursprünglichen Vorschlag von Google ab. Unabhängig vom Trigger, der für CSS-Mauerwerk verwendet wird, hat die CSS Working Group beschlossen, die Eigenschaften für die Größenanpassung und Platzierung von Grid-Vorlagen im CSS-Mauerwerk-Layout wiederzuverwenden.

Das ermöglicht zwar eine bessere Wiederverwendung von Eigenschaften zwischen Layouttypen, kann aber auch verwirrend sein. Wir freuen uns über Ihr Feedback zu diesem Thema. Wir überlegen, ob wir allgemeinere Aliase für Eigenschaften wie grid-template-columns und grid-template-rows erstellen, z. B. template-columns oder template-rows, die sowohl für Raster als auch für Mauerwerk verwendet werden könnten.

Standardgröße für Track verwenden

Mit einem neuen Anzeigetyp bietet sich die Möglichkeit, die Standardeinstellungen für Properties zu überdenken.

Im Raster sind grid-template-columns und grid-template-rows standardmäßig auf none festgelegt, was in der aktuellen Definition normalerweise zu einer einzelnen Spalte oder Zeile führt. Bei Masonry-Layouts würde dieser Standardwert in den meisten Fällen 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-Mauerwerk ersetzt. Die neue Standardgröße für Tracks ist der Wert repeat(auto-fill, auto). Mit diesem Wert wird ein ansprechendes Mauerwerk-Layout erstellt, ohne dass Sie die Spaltengrößen definieren müssen:

.masonry {
  display: masonry;
  gap: 10px;
}

Wie im Bild zu sehen ist, werden im Masonry-Container so viele Spalten mit automatischer Größe erstellt, wie in den verfügbaren Platz passen.

Beim CSS-Raster werden alle Elemente platziert, bevor die Spuren dimensioniert werden. Daher ist diese Definition für die automatische Dimensionierung von Spuren nicht möglich. Bei CSS-Mauerwerk gilt diese Einschränkung jedoch nicht mehr, da Platzierung und Größe miteinander verbunden und vereinfacht sind. Da diese Einschränkung aufgehoben wurde, können wir eine nützlichere Standardgröße für die Spuren in Mauerwerkslayouts angeben.

masonry-Kurzformattribut ausprobieren

Wie bereits erwähnt, basiert die aktuelle Implementierung in Chromium auf den grid-template-*-Properties, um den Mauerwerk-Track in Ihrem Layout zu definieren. Da das Masonry-Layout jedoch nur eine Dimension hat, haben wir auch die Kurzform 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-Mauerwerk-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 von der CSS Working Group noch diskutiert. Probieren Sie es gleich aus und lassen Sie uns wissen, wie es Ihnen gefällt.

Benutzerdefinierte Track-Größen verwenden

Bei der Definition von Track-Größen ist das Mauerwerk genauso flexibel wie das Raster, sodass Sie die Anzahl und Größe der Layout-Tracks genau anpassen können. Die einzelnen Tracks müssen auch nicht alle dieselbe Größe haben, z. B.:

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

In diesem Beispiel definieren wir zuerst zwei Tracks mit einer Breite von 3 rem, gefolgt von einer variablen Anzahl von Tracks mit einer Breite von 5 rem und dann einem einzelnen Track mit einer Breite von 12 rem.

Mehrere Tracks abdecken

Im Masonry-Layout müssen Elemente nicht auf die Spalten beschränkt sein, in denen sie platziert werden. Sie können bei Bedarf mehrere Spalten umfassen. 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 bestimmte Elemente über mehrere Tracks hinweg auf die gesamte Länge des Containers zu erstrecken:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

So wird in der Demo der Nachrichtenseite die Aboanzeige in den Artikeln eingeblendet.

Platzierung von Masonry-Elementen optimieren

In CSS Masonry werden Elemente in der Spalte oder Zeile platziert, die die kürzeste laufende Position hat.

Stellen Sie sich einen zweispaltigen Mauerwerkscontainer vor. Wenn der Container ein 110 px hohes Element in der ersten Spalte und ein 100 px hohes Element in der zweiten Spalte enthält, wird ein drittes Element in der zweiten Spalte platziert, wo es 10 px näher am Beginn der Mauerwerksrichtung ist.

Wenn Sie einen Unterschied von 10 Pixeln in der Laufposition für Ihren Fall als klein genug erachten und es vorziehen, dass das dritte Element stattdessen in der ersten Spalte platziert wird, um besser mit der Quellreihenfolge übereinzustimmen, verwenden Sie die Property item-tolerance.

Mit der neuen Eigenschaft item-tolerance wird die Sensibilität 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 Platzierung von Artikeln anzupassen:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

In der Spezifikation für den Entwurf wird diese Eigenschaft als item-slack bezeichnet. Die CSS Working Group hat vor Kurzem beschlossen, stattdessen item-tolerance als Namen zu verwenden. Die Spezifikation wird demnächst aktualisiert.

Weitere verfügbare Attribute

Sie können dieselben Vorlagengrößen- und ‑platzierungseigenschaften verwenden, um Elemente in der Rasterachse eines Mauerwerk-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 von CSS Grid, wenn Sie Ihr Mauerwerk-Layout erstellen.

Aufruf zum Feedback

Wir freuen uns darauf, dass Sie CSS-Mauerwerk ausprobieren, kreativ werden und die neuen Möglichkeiten entdecken, die sich damit eröffnen. Eine gute Möglichkeit, um loszulegen, ist, sich unsere Demos und den Quellcode anzusehen und eigene Beispiele in Chromium zu erstellen. Denken Sie daran, zuerst das Flag zu aktivieren.

Ihr Feedback ist uns wichtig, um die API zu optimieren und sicherzustellen, dass sie Ihren Anforderungen im Web entspricht. Probieren Sie das neue Layout aus und lassen Sie uns wissen, was Sie davon halten.

Wenn Sie Anregungen oder Feedback zur Form der API haben, können Sie einen Kommentar zu Problem 11243 hinterlassen. Wenn Sie lieber einen Beitrag in Ihrem eigenen Blog oder in den sozialen Medien schreiben möchten, können Sie uns auf X oder LinkedIn darüber informieren.

CSS-Mauerwerk wird noch in Chromium implementiert. Wenn Sie die Funktion testen, beachten Sie bitte, dass wir noch aktiv daran arbeiten und es Fälle geben kann, in denen sie sich nicht wie erwartet verhält. Zu den aktuellen Einschränkungen gehören unter anderem die Unterstützung für dichtes Packen, umgekehrte Platzierung, Subgrids, Out-of-Flow-Elemente, Baseline, DevTools, Fragmentierung und Lückendekoration.

Wenn Sie beim Testen der Funktion einen Fehler finden, geben Sie Feedback, indem Sie einen neuen Chromium-Fehler melden.