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.

Workshop: CSS – The Next Level

Wir machen dich fit für die Zukunft des Web! In diesem Workshop lernst du die spannendsten neuen CSS-Techniken anhand praktischer Übungen kennen.

Berlin, 21. November 2016

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.