Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Masonry und Fake Masonry im direkten Vergleich
Masonry und Fake Masonry im direkten Vergleich

 

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. Aktuell 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; 
}
Natives CSS Masonry vs. Fallback
Natives CSS Masonry vs. Fallback

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. Wir haben einige hilfreiche Lösungen hier gelistet.

Links / Quellen:

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 11 Kommentare

  1. CoBlocks Child – Horst Scheuer
    schrieb am 11.04.2019 um 18:06 Uhr:

    […] Theme gegen den Strom schwimme. Eine Webseite muss heute unbedingt eine Startseite im Grid- oder Masonry-Layout besitzen. Der eigentliche Blog sollte zwei Spalten bestehen. Das alles ist hier nicht zu […]

    Antworten
  2. Reinhard
    schrieb am 05.01.2015 um 18:15 Uhr:

    Danke für die Hilfe. Dein Artikel hat mich auf die Lösung gebracht, wie der ungewollte Umbruch verhindert werden kann. Hat wirklich sehr geholfen.
    Ich lasse jetzt die Ergebnisse einer Suche nach Kochrezepten ganz elegant über eine Liste in 3 Spalten reinfließen. Vorlage war natürlich Pinterest.

    Antworten
  3. Pinterest style layout mit css3 multiple columns – kulturbanause | CSS3.de
    schrieb am 27.04.2014 um 11:49 Uhr:

    […] Beitrag mit Beispielen und Code zum Thema Pinterest Style mit CSS3 hat Jonas Hellwig auf seinem Blog Kulturbanause veröffentlicht. Mit Hilfe von CSS-Columns […]

    Antworten
  4. Responsive design | World Wide Web
    schrieb am 23.04.2014 um 10:32 Uhr:
  5. Rudolf Horbas
    schrieb am 28.03.2014 um 12:08 Uhr:

    Wer sich die grauen Haare sparen will, kann übrigens Isotope einsetzen:
    http://isotope.metafizzy.co/
    Das ist zwar für den kommerziellen Einsatz kostenpflichtig ($ 25 Entwickler, $ 90 Team), aber die einmal zu bezahlende (!) Lizenz lohnt sich. Wir haben Stunden bei dem Versuch verbraten, etwas ähnliches zu machen, und es nie annähernd hinbekommen.

    Viele kommerzielle Templates setzen auf Isotope, man sieht das oft erst, wenn man genau in den Code schaut.

    Antworten
  6. Stefan
    schrieb am 21.03.2014 um 10:46 Uhr:

    Funktioniert das Ganze Internet Explorer 9 und 8?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 21.03.2014 um 10:58 Uhr:

      Nein, halte ich in diesem Zusammenhang allerdings nicht für schlimm. Inkompatible Browser erhalten eine einspaltige Darstellung als Fallback. Es ist halt immer die Frage wie es eingesetzt wird. In meinem Fall war es absolut okay, übrigens auch was die Reihenfolge angeht. Siehe auch: http://html5please.com/#multicolumn

      Antworten
      • Stefan
        schrieb am 22.03.2014 um 14:19 Uhr:

        Vielen Dank für deine ausführliche Antwort!

  7. Chris
    schrieb am 19.03.2014 um 10:46 Uhr:

    Leider ist die Lösung auch nicht optimal, da die Boxen nun vertikal statt horizontal angeordnet werden (erste Reihe liest sich 1,4,8,11…).

    Das gleiche Problem hatten wir auch, wollte aber auf eine Script-Lösung verzichten.. Leider scheint es keine saubere, CSS reine Lösung zu geben :/

    Antworten
    • Webdesign Karlsruhe
      schrieb am 25.02.2019 um 22:55 Uhr:

      Mittels display:flex, order und einer Serverseitigen Ausgabelogik könntest du das Problem ohne weiteres in den Griff kriegen =)

      Habe selber auch Ewigkeiten an einer Lösung ohne JS getüfftelt, doch zu meinem Vorteil verwende ich Google AMP auf meiner Seite, da bleiben mir, was eigenes JS angeht, die Hände gebunden.

      Antworten
  8. Coerv
    schrieb am 19.03.2014 um 10:31 Uhr:

    Das Problem bei der Multiple Columns Lösung ist m.E. die Reihenfolge. In den meisten Fällen möchte man seine neuesten „Pins“ ja oben auf der Seite haben und nicht in der ersten Spalte, es sei denn man scrollt seitwärts.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →