kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Responsive »Pinterest-Style« Layout mit CSS3

Responsive Pinterest Grid

Layouts in versetzter Kachel-Optik (Pinterest-Style) sind aktuell sehr beliebt. Insbesondere für die Bilddarstellung eignet sich dieser Layouttyp sehr gut. Wenn ihr selbst ein Design in diesem Stil umsetzen möchtet, werdet ihr merken, dass es ein paar Hindernisse gibt. Insbesondere wenn das Gestaltungsraster flüssig und mit unterschiedlich vielen Spalten auf den verschiedenen Gerätetypen aufgebaut sein soll scheiden einige Hilfsmittel aus.
In diesem Beitrag archiviere ich den Code für ein flexibles »Pinterest-Style« Layout ohne den Einsatz von JavaScript. Mit Media Queries verändern wir die Anzahl der Spalten.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

Das Problem verstehen

Eine moderne Website wird mit Hilfe eines Gestaltungsrasters in Zeilen und Spalten aufgeteilt. Der Aufbau des responsive Pinterest-Layouts erfolgt jedoch nur über Spalten, wobei die einzelnen enthaltenen Boxen untereinander dargestellt werden. Bei der Konstruktion mit klassischen Techniken ergeben sich verschiedene Probleme:

Versuch 1 - Floating

Gefloatete Boxen sind keine Lösung, da Lücken im Design entstehen und die Anordnung der Boxen sich nicht beeinflussen lässt.

Beispiel anzeigen

Gefloatete Boxen lassen Lücken im Design entstehen
Gefloatete Boxen lassen Lücken im Design entstehen

Versuch 2 - Floating + Clearfix

Ein Clearfix nach jeder Zeile behebt das Problem auch nicht. Die Anordnung der Boxen lässt sich nun zwar besser steuern, allerdings entstehen viel größere Lücken im Design.

Beispiel anzeigen

Die Darstellung mit einem Clearfix nach jedem 3. Element
Die Darstellung mit einem Clearfix nach jedem 3. Element

Versuch 3 - Container als Strukturhilfe

Es wäre möglich die Boxen in Spalten (DIV-Container) aufzuteilen. Dadurch werden zwar die Lücken im Design entfernt, die einzelnen Boxen müssten in den verschiedenen Layout-Typen jedoch in unterschiedlichen Spalten stehen. Andernfalls kann es passieren, dass eine Spalte alleine steht. Inhalte die sich in verschiedenen Ansichten in verschiedenen Elementen befinden, sind ohne eine Technologie wie CSS-Regions oder JavaScript nicht möglich.

Beispiel anzeigen

Manuelle Spalten stehen schnell alleine da
Manuelle Spalten stehen schnell alleine da

Die Lösung – Multiple Columns

Mit Hilfe von CSS-Columns (Multiple Columns) ist es möglich das Layout zu konstruieren. Die Anzahl der Spalten wird dabei mit Media Queries verändert.

Beispiel anzeigen


.content {
  -webkit-column-count: 1;
  -webkit-column-gap: 0;
  -moz-column-count: 1;
  -moz-column-gap: 0;
  column-count: 1;
  column-gap: 0;
}

@media screen and (min-width:650px) {
  .content {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

@media screen and (min-width:960px) {
  .content {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

@media screen and (min-width:1200px) {
  .content {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    max-width:1460px;
  }
}

Damit die Boxen immer vollständig in einer Spalte stehen und kein Umbruch innerhalb einer Box geschieht, wird für die einzelnen Boxen die Eigenschaft column-break-inside: avoid; verwendet.

Responsive »Pinterest-Style« Grid mit CSS Mutiple Columns
Responsive »Pinterest-Style« Grid mit CSS Mutiple Columns

Kleinere Bugs im Firefox beheben

Unter Firefox ist mit einigen kleineren Problemen zu rechnen. Achtet darauf, dass ihr Multiple Columns nicht verwendet um einspaltigen Inhalt zu erzeugen. Befehle wie


.content {
 -webkit-column-count: 1;
 -moz-column-count: 1;
 column-count: 1;
}

solltet ihr also vermeiden. Hier verschluckt sich der Firefox gerne und zeigt anschließend in allen Ansichten einspaltige Layouts. Wenn ihr Probleme mit dem floaten von Boxen innhalb der Spalten habt, versucht anstelle von float:left den Befehl display: inline-block;.

Eine optionale Fallback-Lösung für inkompatible Browser würde ich mit Modernizr herstellen und für diese Browser eine einspaltige Darstellung anbieten. Ein Polyfill halte ich hier für überflüssig.

Populäre Script-Lösungen

Es existieren auch verschiedene JavaScript basierte Lösungen um Layouts im Pinterest-Style umzusetzen. Ich habe alle mir bekannten Lösungen auf Best Web Design Tools gelistet.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

7 Kommentare

  1. Coerv

    Verfasst am 19. März 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.

  2. Chris

    Verfasst am 19. März 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 :/

  3. Stefan

    Verfasst am 21. März 2014 um 10:46 Uhr.

    Funktioniert das Ganze Internet Explorer 9 und 8?

    • Jonas Hellwig

      Verfasst am 21. März 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

      • Stefan

        Verfasst am 22. März 2014 um 14:19 Uhr.

        Vielen Dank für deine ausführliche Antwort!

  4. Rudolf Horbas

    Verfasst am 28. März 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.

  5. Reinhard

    Verfasst am 5. Januar 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.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.