Responsive Masonry Layouts mit CSS erstellen

Von: Jonas

Wir zeigen verschiedene Lösungen um Masonry-Layouts mit und ohne JavaScript zu realisieren.

Aktualisiert von 2014 – 2024 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). Aus technischer Sicht ist das echte Masonry-Layout nicht einfach umsetzbar – zumindest nicht ohne JavaScript und wenn es responsive sein soll. Wir stellen die verschiedenen Lösungen vor; u. a. auch eine sich abzeichnende native CSS-Lösung mittels CSS Grid.

Was ist das »echte« Masonry?

Das echte Masonry-Layout unterscheidet sich von den nicht echten Beispielen durch die Reihenfolge der Boxen. Die Leserichtung sollte von links nach rechts erfolgen, nicht in Form von Spalten. Insbesondere bei langen Listen und in responsiven Layouts spielt das echte Masonry seine Stärken aus.

Native CSS Masonry Layouts mit CSS Grid

Für CSS Grid existiert eine CSS-Technik im Entwurfsstadium, mit der ein Masonry-Layout über einen einzelnen Befehl hergestellt werden kann. Hierbei wird Masonry als Teil von CSS Grid definiert, was zu Problemen führt. Daher möchte u.a. das Chrome-Team Masonry außerhalb der Grid-Technologie behandeln und wirbt für diesen alternativen Ansatz.

Den CSS Grid-Ansatz hat Firefox Nightly (Entwicklerversion von Firefox) das Feature »under the flag« implementiert. Um den Effekt zu sehen, müsst ihr daher folgende Schritte durchführen:

• Firefox Nightly öffnen
• about:config in der Adresszeile eingeben (es öffnen sich die Einstellungen für experimentelle Web-Funktionen)
• Die Einstellung layout.css.grid-template-masonry-value.enabled suchen und auf true setzen.

Anschließend funktioniert z.B. folgender CSS-Code. Neu ist nur die letzte Zeile. Den Befehl für grid-template-rows haben wir hier erklärt.

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

Beispiel anzeigen

Workarounds mit CSS

Bis zur nativen CSS-Lösung müssen wir wohl noch etwas warten. Daher existieren aktuell zahlreiche Lösungen, um falsche Masonry-Layouts mit purem CSS zu erzeugen.

CSS Columns

Mit Hilfe von CSS-Columns (Multiple Columns) ist es möglich, das Layout zu konstruieren. Die Anzahl der Spalten wird intrinsisch geändert. Der Nachteil dieser Lösung besteht in der falschen Reihenfolge der Boxen. In einigen Browser kann es zu falschen Umbrüchen kommen – das lässt sich allerdings mit einigen Tricks lösen.

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

Beispiel anzeigen


Flexbox und order

Auf Basis von Flexbox kann ebenfalls ein Masonry erstellt werden. Die Lösungen funktionieren zwar – sind aber möglicherweise unter dem Strich auch nicht besser als die Zuhilfenahme von JavaScript. Es ist sehr viel CSS-Code notwendig und die Lösung »knirscht« bei flexiblen-Container-Höhen und responsiven Layouts.

.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 anzeigen

Lösungen mit JavaScript

Neben dem originalen Script existieren zahlreiche JavaScript-basierte Lösungen, um Layouts im Masonry-Style umzusetzen.

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. 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 Xing