CSS Masonry Layout Draft – Pinterest-Layouts nativ im Browser

1. Was ist ein Masonry Layout?

Ein CSS Masonry Layout beschreibt ein Raster-Layout, bei dem Items in Spalten angeordnet werden, aber die Zeilenhöhe nicht fixiert ist. Stattdessen rutscht jedes neue Item in die Spalte, die den geringsten verbrauchten vertikalen Platz hat – ähnlich wie Steine beim Mauerbau (englisch: masonry). Das Ergebnis ist ein dichtes Raster ohne Lücken zwischen unterschiedlich hohen Elementen, das Pinterest berühmt gemacht hat.

Das grundlegende Problem mit klassischem CSS Grid: Grid-Layouts basieren auf einem strikten Zeilen-Spalten-Raster. Wenn Items unterschiedliche Höhen haben, entstehen entweder Lücken zwischen ihnen (weil die Zeile so hoch wie das höchste Item ist) oder Items müssen grid-row-span erhalten, was voraussetzt, dass ihre genaue Höhe im Voraus bekannt ist. Beides ist für dynamische Inhalte unbrauchbar. Bisherige Lösungen nutzten entweder JavaScript (Masonry.js, Isotope, react-masonry-css), Multi-Column-Layouts (column-count) oder absolute Positionierung – alle mit erheblichen Nachteilen bei Performance, Zugänglichkeit oder Dokumentenreihenfolge.

Das CSS Masonry Draft löst das Problem auf der Ebene des Layout-Algorithmus selbst: Der Browser berechnet die Platzierung aller Items nach einem Masonry-Algorithmus, ohne dass JavaScript die Element-Höhen messen und Positionen berechnen muss. Das ist nicht nur einfacher zu implementieren, sondern auch performanter und zugänglicher, weil die Dokumentenreihenfolge erhalten bleibt.

2. Die CSS Masonry Draft-Spezifikation

Das CSS Masonry-Feature ist Teil der CSS Grid Layout Level 3-Spezifikation, die vom CSS Working Group entwickelt wird. Der aktuelle Status ist "Editor's Draft" – das bedeutet, die Spezifikation ist noch nicht stabil, aber die grundlegende API ist festgelegt und Implementierungen in Browsern sind vorhanden. Die Spezifikation definiert Masonry als eine Erweiterung des bestehenden Grid-Modells: Ein Grid-Container kann auf einer seiner Achsen den Masonry-Algorithmus anstelle des normalen Grid-Algorithmus verwenden.

Es gab eine wichtige Debatte in der CSS Working Group: Google schlug vor, CSS Masonry als separate Eigenschaft außerhalb von Grid zu definieren (display: masonry), während Mozilla die Integration in Grid (grid-template-rows: masonry) bevorzugte. Nach einer langen Diskussion entschied sich die Working Group für die Grid-Integration, die auch der Mozilla-Implementierung entspricht. Das bedeutet, dass CSS Masonry die gesamte Grid-Toolbox – Gap, Alignment, Spanning, Named Lines – nutzen kann.

3. grid-template-rows: masonry – Syntax und Verhalten

Die grundlegende Syntax für CSS Masonry ist einfach: grid-template-rows: masonry in Kombination mit einer normalen grid-template-columns-Definition. Das masonry-Keyword auf der Zeilenachse aktiviert den Masonry-Algorithmus für diese Richtung. Alternativ kann grid-template-columns: masonry verwendet werden, um ein horizontales Masonry (Spalten wachsen nach rechts, Items füllen in Zeilenrichtung auf) zu erzeugen – was seltener vorkommt, aber für spezielle Layouts nützlich ist.

Das Verhalten des CSS Masonry-Algorithmus: Der Container definiert die Spalten normal (z.B. grid-template-columns: repeat(3, 1fr)). Items werden in Leserichtung platziert, aber nicht in feste Zeilen gezwungen – sie füllen immer die kürzeste vorhandene Spalte. gap funktioniert normal und erzeugt Abstände zwischen allen Items sowohl horizontal als auch vertikal. Items können grid-column: span 2 erhalten, um sich über mehrere Spalten zu erstrecken.

/* CSS Masonry Draft: basic syntax */

/* Enable masonry on the row axis */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry; /* activates masonry algorithm */
  gap: 1rem;
}

/* Responsive masonry: auto-fill columns with min width */
.masonry-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-template-rows: masonry;
  gap: 1.25rem;
}

/* Horizontal masonry (items fill row-by-row) */
.masonry-horizontal {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: masonry;
  gap: 1rem;
}

/* Feature detection: apply masonry only where supported */
@supports (grid-template-rows: masonry) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-template-rows: masonry;
    gap: 1rem;
  }
}

4. Erstes Beispiel: Bild-Galerie als Masonry Grid

Das praktische CSS Masonry-Beispiel schlechthin ist eine Bild-Galerie mit Fotos unterschiedlicher Seitenverhältnisse. Mit einem normalen Grid würden alle Bilder auf dieselbe Höhe skaliert – man verliert das originale Seitenverhältnis oder bekommt Lücken. Mit CSS Masonry behält jedes Bild sein natürliches Seitenverhältnis, und der Algorithmus stapelt die Bilder lückenlos in die kürzeste Spalte.

Ein wichtiges Detail für Bild-Galerien: img { width: 100%; height: auto; display: block; } ist die Voraussetzung, damit Bilder ihre natürliche Höhe beibehalten und der CSS Masonry-Algorithmus korrekt arbeiten kann. Bilder mit fester Höhe würden den Masonry-Algorithmus aushebeln, weil alle Bilder dann dieselbe Höhe hätten. Der Block-Display verhindert außerdem die Standard-Lücke unter Inline-Bildern.

Für Cards mit variablem Textinhalt – etwa Blog-Beiträge mit unterschiedlicher Teaser-Länge oder Produktkarten mit variablem Beschreibungstext – ist CSS Masonry noch nützlicher. Statt alle Cards auf die höchste zu stretchen oder JavaScript für gleichmäßige Abstände zu schreiben, arrangiert der Browser die Cards automatisch lückenlos. Das ist das Hauptversprechen des Spezifikationsentwurfs.

5. Alignment und Spanning in Masonry Grids

Da CSS Masonry als Grid-Erweiterung definiert ist, gelten die bekannten Alignment-Eigenschaften. justify-items und align-items funktionieren für Items im Masonry-Container. justify-self kann auf einzelnen Items verwendet werden, um sie innerhalb ihrer Spalte zu positionieren. Das ist besonders nützlich für Items, die schmaler als ihre Spalte sind – zum Beispiel Buttons oder kleine Bilder in einem CSS Masonry-Layout.

Spanning ist in CSS Masonry auf die Spaltenachse beschränkt. grid-column: span 2 lässt ein Item zwei Spalten breit werden – das funktioniert wie im normalen Grid. grid-row: span 2 macht in einem Masonry-Layout keinen Sinn, da die Zeilenachse durch den Masonry-Algorithmus kontrolliert wird und keine festen Zeilen hat. Das ist ein wichtiger Unterschied zum regulären Grid-Spanning.

/* CSS Masonry Draft: alignment and spanning */

.masonry-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
  gap: 1rem;
  align-tracks: start; /* align items to the top of each track */
}

/* Featured item spans two columns */
.masonry-gallery .featured {
  grid-column: span 2;
}

/* Small item: centered within its column */
.masonry-gallery .small-badge {
  justify-self: center;
  width: 80%;
}

/* Images: natural aspect ratio preserved */
.masonry-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
  object-fit: cover;
}

/* Masonry with named grid lines for semantic spanning */
.masonry-layout {
  display: grid;
  grid-template-columns: [main-start] 1fr 1fr [sidebar-start] 1fr [sidebar-end main-end];
  grid-template-rows: masonry;
  gap: 1.5rem;
}

6. Browser-Flags: So aktiviert man die Vorschau

Das CSS Masonry Draft ist in Firefox und in Chromium-basierten Browsern hinter experimentellen Flags verfügbar. In Firefox kann man grid-template-rows: masonry seit Firefox 77 über layout.css.grid-template-masonry-value.enabled in about:config aktivieren. In Chrome Canary und Chromium Nightly-Builds ist das Feature über den Flag #enable-experimental-web-platform-features in chrome://flags verfügbar. Produktions-Chrome und Safari unterstützen CSS Masonry ohne Flag zum Stand von Mai 2026 noch nicht.

Für die Entwicklung empfiehlt sich Firefox Nightly als Referenzbrowser für CSS Masonry-Features. Die Firefox-Implementierung folgt am engsten der aktuellen Spezifikation, weil Mozilla maßgeblich an der Entwicklung des CSS Masonry-Proposals beteiligt war. Chrome Canary ist für Cross-Browser-Tests nützlich, aber die Implementierungen können in Details abweichen, während die Spezifikation noch nicht abgeschlossen ist.

Für Produktionsumgebungen ist @supports (grid-template-rows: masonry) die richtige Strategie: Im Unterstützungsfall wird das native CSS Masonry-Layout verwendet, außerhalb davon ein Multi-Column- oder flexibles Grid-Fallback. Dieser progressive Enhancement-Ansatz ermöglicht es, heute mit der nativen API zu experimentieren, ohne bestehende Nutzer ohne Unterstützung mit kaputten Layouts zu konfrontieren.

7. Polyfill-Vergleich: JavaScript vs. natives CSS

Vor dem CSS Masonry Draft waren JavaScript-Bibliotheken die einzige valide Option für echte Masonry-Layouts. Die bekannteste ist Desandro's Masonry.js – seit 2010 eine der meistgenutzten Layout-Bibliotheken überhaupt. Sie misst die Höhe jedes Elements, berechnet Positionen, setzt absolute Positionen und reagiert auf Resize-Events. Das Ergebnis ist korrekt, aber teuer: Initiales Layout erfordert DOM-Lesezugriffe für alle Items (Layout Thrashing), Resize-Events müssen debounced werden, und JavaScript muss geladen und ausgeführt sein, bevor das Layout korrekt ist.

Ein alternativer CSS-Ansatz ohne JavaScript ist column-count oder columns: Die Elemente werden in Spalten angeordnet, aber in der Reihenfolge der Spalten, nicht in Leserichtung. Ein Item in Spalte 1 kommt vor einem Item in Spalte 2, egal ob letzteres im HTML früher kommt. Das ist für Inhalte mit semantischer Reihenfolge (z.B. Blog-Posts nach Datum) problematisch – Screenreader und Tab-Navigation folgen der DOM-Reihenfolge, nicht der visuellen Spaltenanordnung. Nativ CSS Masonry löst dieses Problem, weil es die Dokumentenreihenfolge beibehält.

8. CSS Masonry-Ansätze im Vergleich

Die verschiedenen Masonry-Implementierungsansätze unterscheiden sich fundamental in Performance, Zugänglichkeit und Implementierungsaufwand.

Die "Grid + grid-row: span"-Variante – die bekannteste CSS-only-Alternative ohne CSS Masonry – funktioniert nur für Inhalte mit bekannten Höhen. Man teilt die Inhaltshöhe durch eine feste Zeilenhöhe (z.B. 10px) und setzt grid-row: span X entsprechend. Das ist wartungsaufwändig, erfordert entweder JavaScript zur Berechnung oder feste Höhen, und scheitert bei dynamischen Inhalten. Es ist die bestmögliche CSS-Annäherung ohne natives CSS Masonry, aber kein vollwertiger Ersatz.

/* CSS Masonry alternatives: current best practices */

/* Option 1: column-count (DOM order caveat!) */
.gallery-columns {
  columns: 3 240px; /* 3 columns, min 240px each */
  column-gap: 1rem;
}
.gallery-columns > * {
  break-inside: avoid; /* prevent items from splitting */
  margin-bottom: 1rem;
}

/* Option 2: CSS Grid with JS-calculated span (dynamic) */
.masonry-grid-approx {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 10px; /* small row unit for JS span calculation */
  gap: 1rem 1rem;
}
/* JS sets: element.style.gridRowEnd = 'span ' + Math.ceil(height / 10) */

/* Option 3: Progressive enhancement with @supports */
.gallery { columns: 3; column-gap: 1rem; }
.gallery > * { break-inside: avoid; margin-bottom: 1rem; }

@supports (grid-template-rows: masonry) {
  .gallery {
    columns: unset;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-template-rows: masonry;
    gap: 1rem;
  }
  .gallery > * { margin-bottom: 0; }
}

9. Interop 2025 und der Weg zur Standardisierung

Das Interop-Projekt ist eine Zusammenarbeit zwischen den Browser-Herstellern Apple, Google, Microsoft und Mozilla, um Cross-Browser-Kompatibilität für wichtige Web-Features zu verbessern. CSS Masonry war ein Kandidat für Interop 2025 und wurde mit hoher Priorität eingestuft, was signalisiert, dass die Browser-Hersteller das Feature für wichtig halten. Interop-Features erhalten koordinierte Implementierungsarbeit in allen beteiligten Browsern – was historisch der schnellste Weg von einem Draft zu Baseline-Status ist.

Für Entwickler bedeutet das: CSS Masonry ist kein spekulatives Feature, sondern eines mit klarem Standardisierungspfad. Die Frage ist nicht ob, sondern wann es ohne Flags in allen Browsern verfügbar sein wird. Die konservative Schätzung basierend auf ähnlichen Features: 12-24 Monate nach Interop-Aufnahme. Das bedeutet, dass Teams heute mit der nativen API experimentieren, Fallback-Strategien entwickeln und sich auf den progressiven Enhancement-Übergang vorbereiten sollten.

10. Zusammenfassung

Das CSS Masonry Draft bringt natives Masonry-Layout durch grid-template-rows: masonry als Teil der CSS Grid Level 3-Spezifikation. Der Algorithmus platziert Items in die kürzeste verfügbare Spalte, behält die DOM-Reihenfolge bei und macht JavaScript-Bibliotheken wie Masonry.js überflüssig. Gap, Alignment und Spalten-Spanning aus dem regulären Grid-Modell funktionieren vollständig.

Zum Stand Mai 2026 ist CSS Masonry in Firefox Nightly und Chrome Canary hinter Flags verfügbar. @supports (grid-template-rows: masonry) ermöglicht progressive Enhancement: native API für unterstützende Browser, column-count-Fallback für alle anderen. Mit Interop 2025 ist der Standardisierungspfad klar – Projekte, die heute Masonry benötigen, sollten die native API vorbereiten und mit robusten Fallbacks arbeiten.

11. FAQ: CSS Masonry Layout