Responsive Masonry Layouts mit CSS erstellen

Von: Jonas

Mit CSS Grid Lanes können echte Masonry-Layouts ohne JavaScript realisiert werden.

Aktualisiert von 2014 – 2026 11 Kommentare

Mit dem sog. Masonry-Layout können Inhalte wie Bilder oder Card-Elemente ansprechend und platzsparend auf einer Website angezeigt werden. Im Gegensatz zu »klassischen Rastern« zeichnet es sich durch eine versetzte Kachel-Optik aus – daher auch der Name (Masonry = Mauerwerk). Lange Zeit war ein echtes Masonry-Layout nur mit JavaScript umsetzbar. Mit display: grid-lanes gibt es eine native CSS-Lösung.

Was ist das »echte« Masonry?

Das echte Masonry-Layout unterscheidet sich von den nicht echten Varianten durch die Leserichtung: Inhalte werden von links nach rechts angeordnet, nicht spaltenweise. Insbesondere bei langen Listen und in responsiven Layouts spielt das echte Masonry seine Stärken aus.

Natives CSS Masonry mit display: grid-lanes

Die CSS Grid Layout Level 3 Spezifikation definiert Masonry als eigenständigen display-Wert: grid-lanes. Masonry ist damit kein Teil von CSS Grid mehr, sondern eine eigene Layout-Methode. Spalten werden wie im CSS Grid-Layout definiert; auf der Zeilenachse ordnen sich die Elemente automatisch lückenlos an.

Ein minimales Beispiel:

.masonry {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em;
}

Das war es. Kein weiterer Code notwendig. Die Elemente im Container ordnen sich automatisch im Masonry-Stil an. Eine umfangreiche Übersicht über alle Features inkl. Layout-Generator findet ihr bei Webkit.

Fallback-Verhalten

In Browsern ohne Unterstützung für display: grid-lanes wird der Wert ignoriert. Als Progressive Enhancement empfiehlt sich deshalb, zuerst ein CSS-Columns- oder Grid-Fallback zu definieren und display: grid-lanes anschließend mit @supports zu überschreiben:

.masonry {
  columns: 250px;
  gap: 1em;
}

@supports (display: grid-lanes) {
  .masonry {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    columns: unset;
  }
}

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Ältere Lösungen

Die folgenden Ansätze dokumentieren, wie Masonry-Layouts vor der nativen CSS-Lösung umgesetzt wurden. Sie sind für aktuelle Projekte nicht mehr empfehlenswert, aber als Referenz weiterhin nützlich.

CSS Columns (Fake Masonry)

Mit CSS Columns lässt sich optisch ein Masonry-Layout erzeugen. Der Nachteil: Die Leserichtung verläuft spaltenweise, nicht von links nach rechts.

.fake-masonry {
  column-width: 300px;
  column-gap: 1em;
}

Beispiel öffnen

Flexbox und order (Fake Masonry)

Auf Basis von Flexbox lässt sich ebenfalls ein Masonry-Effekt erzeugen. Die Lösung erfordert jedoch sehr viel CSS und funktioniert bei flexiblen Container-Höhen und responsiven Layouts nur eingeschränkt.

.fake-masonry {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 665px;
}

.fake-masonry::before,
.fake-masonry::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

.item {
  box-sizing: border-box;
  width: 32%;
  margin-bottom: 2%;
  padding: 1em;
}

.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

Beispiel öffnen

Lösungen mit JavaScript

Vor der nativen CSS-Lösung war JavaScript die einzige Möglichkeit für ein echtes Masonry-Layout. Das originale Masonry-Script von David DeSandro ist die bekannteste Bibliothek; daneben existieren zahlreiche weitere.

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer von kulturbanause. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Mastodon, LinkedIn, Xing und YouTube.