kulturbanause Blog

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

Gestaltungsraster (CSS-Grids) im Web Design

CSS Grids

Eine moderne Website basiert i.d.R. auf einem sog. CSS-Grid System - einem Gestaltungsraster. Das Raster hat dabei verschiedene Aufgaben: Einerseits trägt es zu einem strukturierten Layout bei und sorgt dafür, dass eine Website professionell wirkt, andererseits unterstützt das Raster auch den Web Designer bei der Entwicklung, indem es vordefinierte CSS-Klassen bereitstellt.
In diesem Beitrag möchte ich das Thema Gestaltungsraster im Web ausführlich beleuchten. Ich gehe detailliert auf Responsive Grid Systeme ein, und erkläre die Funktionsweise an verschiedenen Beispielen.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Die Bedeutung des Gestaltungsrasters für das Layout

Ein Gestaltungsraster ist ein unsichtbares System aus Linien, an dem die verschiedenen Gestaltungselemente – meist die globalen Strukturelemente einer Website – ausgerichtet werden. Ein Web-Layout das auf einem Raster basiert, wirkt aufgeräumter und harmonischer. Eure Besucher empfinden ein rasterbasiertes Layout daher unterbewusst als professioneller.

Positionierung von Elementen innerhalb eines Gestaltungsrasters
Positionierung von Elementen innerhalb eines Gestaltungsrasters

Sobald ein Raster im Hintergrund arbeitet, habt ihr auch die Möglichkeit Elemente bewusst aus dem Raster ausbrechen zu lassen. Diese Objekte treten dann besonders stark in den Vordergrund.

Das ausbrechende Element oben rechts gewinnt stark an visueller Bedeutung
Das ausbrechende Element oben rechts gewinnt stark an visueller Bedeutung

Die Besonderheit von Rastern im Web Design

Gestaltungsraster existieren sowohl im Print- als auch im Grafik- und Web-Design. Raster im Print- und Grafik-Design leiten sich i.d.R. von gestalterischen Elementen oder Rahmenbedingungen ab. Der Satzspiegel einer Broschüre basiert beispielsweise auf dem Papierformat, oder Elemente werden zueinander im goldenen Schnitt positioniert.

Im Web Design verhalten sich Raster etwas anders. Das Raster leitet sich nicht aus der Gestaltung ab, sondern es wird zuerst konstruiert. Das Layout der Website orientiert sich anschließend am Raster, was insbesondere Kollegen aus dem Print- und Grafik-Design als Einschränkung ihrer kreativen Freiheit empfinden.
Die unterschiedlichen Herangehensweisen bei der Arbeit mit Gestaltungsraster hängen u.a. damit zusammen, dass im Web keine starre Fläche existiert, die nach gängigen Harmonieregeln unterteilt werden kann. Anders als beispielsweise im Print-Design, wo das Papierformat existiert. Der Viewport im Browser ist flexibel.

Spaltenbasierte Layouts

Gestaltungsraster im Web haben bereits einige Entwicklungen durchgemacht. Anfangs waren die meisten Websites spaltenbasiert aufgebaut. Das Holy Grail-Layout ist ein typischer Vertreter dieser Epoche. Zu diesem Zeitpunkt entstanden die ersten sog. CSS-Grid-Systeme.

Spaltenbasierter Website-Aufbau
Spaltenbasierter Website-Aufbau

Statische CSS-Grid Systeme

Ein CSS-Grid-System hilft dem Web Designer in zweierlei Hinsicht. Einerseits bietet ein CSS-Grid ein spaltenbasiertes Raster mit einer je nach System unterschiedlichen Anzahl an Spalten (meist 12 und/oder 16). An diesem Raster können Web Designer dann ihr Layout ausrichten und erreichen so eine harmonische und aufgeräumte Gestaltung.

Andererseits stellt das CSS-Grid eine Reihe von CSS-Klassen bereit, mit deren Hilfe die Elemente der Website im Raster positioniert werden können. Schauen wir uns die Funktionsweise am Beispiel des sehr populären 960gs an. Auch wenn das Grid System aus heutiger Sicht veraltet ist, sind die Grundlagen für das Verständnis komplexerer Raster entscheidend.

Funktionsweise eines statischen CSS-Grids

Das 960 Grid System ist eines der bekanntesten statischen Rastersysteme. Wie der Name bereits andeutet basiert es auf einer Gesamtbreite von 960 Pixeln. Mit der festen Breite wurde eine künstliche Arbeitsfläche geschaffen, die dann wiederum unterteilt werden konnte. Die 960 Pixel haben dabei den Vorteil, dass Sie sich sehr gut in Spalten aufteilen lassen. Sowohl 12- als auch 16-spaltige Raster stellen kein Problem dar und sind auch Bestandteil des 960-Downloadpakets. Neben statische Vorlagen für Grafikprogramme wie Photoshop und Co. bietet das Raster auch Web-Entwicklern eine Grundlage. Es stellt CSS-Klassen für die einzelnen Breiten innerhalb des Rasters zur Verfügung.


.grid_1 {
  width: 60px;
}

.grid_2 {
  width: 140px;
}

.grid_3 {
  width: 220px;
}

.grid_4 {
  width: 300px;
}

…

Ein Element das über eine Rasterspalte läuft, ist im oben gezeigten Beispiel 60 Pixel breit. Ein Element mit einer Breite von zwei Spalten inkl. Abstand ist 140 Pixel breit usw.
Die Aufschlüsselung der Rasterspalten in einzelne CSS-Klassen ermöglichte es Elemente flexibel im Raster zu positionieren. Da das Grid System alle CSS-Klassen bereits mitbringt, nimmt es Web Designern natürlich viel Arbeit ab.

Responsive CSS-Grids

Im Responsive Web Design sind Raster ein wenig komplexer geworden. Normalerweise haben wir es hier mit mehreren Gestaltungsrastern zu tun, die an Breakpoints umbrechen und die Anzahl an Rasterspalten ändern. Es gibt beispielsweise eine 4-spaltige Ansicht auf kleinen Displays, eine 8-spaltige Ansicht in mittleren Displaygrößen und eine 12-spaltige Desktop-Darstellung. Darüber hinaus sind in einem responsiven Layout die Rasterspalten in der Breite flexibel. Die Breitenangaben im CSS-Code basieren daher auf Prozentwerten. Zusätzlich werden Elemente in Zeilen zusammengefasst. Zeilen haben den Vorteil, dass Elemente im Raster leichter horizontal verschoben werden können. Zudem werden Sie häufig als CSS-Clear eingesetzt.

Funktionsweise des responsiven CSS-Grids

Der Aufbau eines simplen, maximal dreispaltigen Rasters sieht wie folgt aus:

Einspaltiges Raster auf kleinen Displays, zweispaltig in den mittleren Größen und dreispaltig in der maximalen Ausdehnung.
Einspaltiges Raster auf kleinen Displays, zweispaltig in den mittleren Größen und dreispaltig in der maximalen Ausdehnung.

Zeilen – .row

Zunächst werden globale CSS-Klassen für das Verhalten von Zeilen (.row) festgelegt. Da gefloatete Zeilen schnell zu Problemen mit verschachtelten Rastern führen können, nutzt man häufig die display: table;-Eigenschaft auf den Pseudoelementen :before und :after um das gewünschte Verhalten herzustellen.


.row {
  width:auto;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

Spalten (.columns)

Innerhalb der Zeilen werden werden Spalten definiert. Um mehrere Spalten nebeneinander anzeigen zu können, erhalten alle Spalten über eines globale Klasse (.columns) die Anweisung nach links zu floaten. Eine Spalte befindet sich also immer in einer Zeile, wodurch ihr Floating-Verhalten besser gesteuert werden kann.


.columns {
  float:left;
}

Darüber hinaus werden CSS-Klassen für alle Breitenangaben der Rasterspalten erzeugt. Damit die einzelnen Raster-Varianten im Code unterschieden werden können, gibt man ihnen Namen. Beispielsweise small, medium und large. Die CSS-Klassen für die einzelnen Spalten erhalten dann je nach Layoutversion einen entsprechenden Präfix.

Mit Breakpoints, die sowohl eine min als auch eine max-Angabe erhalten, grenzt man zudem den Wirkungsbereich der einzelnen Raster von einander ab. Der vollständige CSS-Code für das oben skizzierte Beispiel könnte demnach wie folgt aussehen:



/* Globale CSS-Klassen */

.row {
  width:auto;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.columns {
  float:left;
}

/* Small */
@media screen and (max-width:600px) {
  .small-1 {width: 100%;}
}

/* Medium */
@media screen and (min-width:600px) and (max-width:1000px) {
  .medium-1 {width:50%;}
  .medium-2 {width:100%;}
}

/* Large */
@media screen and (min-width:1000px) {
  .large-1 {width:33.333333%;}
  .large-2 {width:66.666666%;}
  .large-3 {width:100%;}
}

Im HTML-Code werden den jeweiligen Elementen nun alle CSS-Klassen nacheinander zugewiesen. Damit kann das Verhalten eines Moduls gezielt in einer bestimmten Ansicht der Website gesteuert werden. Wie das Raster semantisch am wertvollsten aufgebaut werden muss, ist dann abhängig vom Design und dem jeweiligen Projekt.

Der HTML-Code des oben skizzierten Beispiels sieht so aus:


<div class="row">
  <header class="small-1 medium-2 large-3 columns">
  	  Header …
  </header>
</div>

<div class="row">
  <nav class="small-1 medium-2 large-3 columns">
  	  Navi …
  </nav>
</div>

<div class="row">
  <article class="small-1 medium-1 large-1 columns">
  	  Inhalt …
  </article>
  <article class="small-1 medium-1 large-1 columns">
  	  Inhalt …
  </article>
  <aside class="small-1 medium-2 large-1 columns">
  	  Sidebar …
  </aside>
</div>

<div class="row">
  <footer class="small-1 medium-2 large-3 columns">
  	  Footer …
  </footer>
</div>

Ein Beispiel des oben gezeigten Aufbaus könnt ihr euch hier anschauen:

Beispiel anzeigen

CSS-Grids in Frameworks

In Frameworks wie Bootstrap oder Foundation bildet ein solides Gestaltungsraster die Grundlage für alle anderen Module. Die Funktionsweise ist dabei stets die gleiche und mit dem oben gezeigten Beispiel stark vergleichbar. Nur die Anzahl an Rasterspalten und Rastervarianten, sowie die Position der Breakpoints und die Namensgebung der CSS-Klassen weicht ab. Die Logik ist aber identisch.

In der Dokumentation des Frameworks Foundation wird das Raster beispielsweise folgendermaßen erklärt:


<div class="row">
  <div class="small-2 large-4 columns">…</div>
  <div class="small-4 large-4 columns">…</div>
  <div class="small-6 large-4 columns">…</div>
</div>

Bootstrap verwendet etwas andere Bezeichnungen für CSS-Klassen:


<div class="row">
  <div class="col-xs-12 col-md-8">…</div>
  <div class="col-xs-6 col-md-4">…</div>
</div>

Das Framework flexible.gs lässt sich flexibel anpassen und ermöglicht Raster mit einer Anzahl von 2-24 Spalten. Auch hier weicht die Bezeichnung der CSS-Klassen ab, die Funktionsweise ist ebenfalls identisch.

CSS-Klassen im Raster von flexible.gs
CSS-Klassen im Raster von flexible.gs

Spalten einrücken mit Offset-Klassen

Der Basis-Aufbau eines flexiblen Rasters sollte nun soweit klar sein. Neben der Breite beinhaltet ein CSS-Grid normalerweise noch weitere CSS-Klassen zur Steuerung der Spalten. Dazu gehören u.a. auch die sog. Offset oder Space-Klassen. Hierbei handelt es sich um CSS-Klassen mit denen Elemente um eine beliebige Anzahl an Rasterspalten eingerückt werden können.

Offset-Klassen in der Doku von Bootstrap 3
Offset-Klassen in der Doku von Bootstrap 3

Anstelle der Breitenangabe der oben zeigten Beispiele wird in diesem Fall einfach margin-left: verwendet. Im Falle unseres maximal dreispaltigen Rasters würde man dazu folgende CSS-Klassen ergänzen:


@media screen and (min-width:600px) and (max-width:1000px) {
  .medium-offset-1 {
    margin-left:50%;
  }
}

@media screen and (min-width:1000px) {
  .large-offset-1 {
    margin-left:33.333333%;
  }

  .large-offset-2 {
    margin-left:66.666666%;
  }
}

Spalten umkehren

Neben Offset-Klassen gehören auch die sog. Push und Pull-Klassen zum Standard-Repertoire eines soliden CSS-Grids. Mit diesen Klassen werden innerhalb von Zeilen (.row) einzelne Elemente verschoben. Das funktioniert, da die einzelnen Spalten (.columns) innerhalb einer Zeile normalerweise nach links gefloatet werden. Über .push {float:right;}, kann dann eine einzelne Spalte innerhalb einer Zeile nach rechts geschoben werden. In der Smartphone-Ansicht bleibt die Reihenfolge unverändert und folgt dem HTML-Aufbau.


.push {
  float:right;
}

<article class="small-1 medium-1 large-1 columns push">
…
</article>

Beispiel anzeigen

Neben der hier gezeigten Positionierung mit Hilfe von Floats, existieren auch neuere CSS-Layout-Modelle wie Flexbox, das CSS Grid Layout Module oder CSS Regions.

Abstände zwischen Rasterspalten

In den bisher gezeigten Beispielen sitzen die einzelnen Spalten des Rasters direkt aneinander. Um nun Abstände (Gutter) zwischen den Spalten zu erzeugen wird normalerweise der globalen CSS-Klasse .columns rechts und links ein Innenabstand hinzugefügt. Da sich die Spalten in einer Zeile jedoch immer auf eine Breite von 100% ergänzen, führt padding dazu, dass die Summe aller Spalten die Breite von 100% übersteigt und das Raster somit nicht mehr funktioniert. Aus diesem Grund wird im hier beschriebenen Rasteraufbau das CSS Box-Model nach innen gedreht und anhand der border-box berechnet. Mehr zu diesem Thema findet ihr hier.


* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.columns {
  float:left;
  padding-left:1em;
  padding-right: 1em;
}

Damit ihr den Innenabstand des Beispiels besser sehen könnt, habe ich innerhalb jeder Spalte einen <div> hinzugefügt und etwas dunkler eingefärbt.

Beispiel anzeigen

Das CSS-Grid inkl. Innenabstand der Spalten
Das CSS-Grid inkl. Innenabstand der Spalten

Der Innenabstand der Spalten sorgt dafür, dass an den Außenkanten des Layouts einfache Abstände entstehen, und innerhalb des Rasters doppelte Abstände. Sehr praktisch ist auch, dass auf Tablets und Smartphones automatisch ein ausreichender Abstand zum Displayrand eingehalten wird.

Raster verschachteln

Etwas komplizierter bzw. unübersichtlich wird es, wenn CSS-Raster verschachtelt werden sollen. Verschachtelte Raster werden benötigt, wenn innerhalb eines Elements ein vom Hauptraster abweichendes Verhalten gewünscht wird.

Aufbau des Beispiels mit verschachteltem Raster in der Seitenleiste
Aufbau des Beispiels mit verschachteltem Raster in der Seitenleiste

In unserem Beispiel sollten dazu drei Boxen in der Seitenleiste eingefügt werden. In der kleinen Layout-Variante sollten die Boxen untereinander stehen, im mittleren Layout nebeneinander und auf großen Bildschirmen wieder untereinander. Für ein solches Verhalten wird ein verschachteltes Raster benötigt. Zusätzlich muss das Beispiel in der medium-Ansicht über mindestens 6 Rasterspalten verfügen um das Verhalten abbilden zu können. Ich habe das Beispiel daher entsprechend angepasst.

Herausforderungen bei verschachtelten Rastern

Bei verschachtelten Rastern ergeben sich zwei Probleme. Zunächst einmal addieren sich die Innenabstände der Spalten, so dass Elemente immer weiter eingerückt werden, je häufiger das Raster verschachtelt wurde.

Das verschachtelte Raster vor und Nach der Anpassung des Zeilen-Innenabstands
Das verschachtelte Raster vor und Nach der Anpassung des Zeilen-Innenabstands

Das Problem kann glücklicherweise schnell behoben werden. Sobald sich eine Zeile in einer Zeile befindet, wird über negatives margin der Innenabstand kaschiert.


.row .row {
  margin-left:-1em;
  margin-right: -1em;
}

Das zweite Problem ist, dass die Angabe der Spaltenbreite in einem verschachtelten Raster nicht mehr so leicht nachvollziehbar ist. In der large-Ansicht unseres Beispiels müssen die Boxen innerhalb der Seitenleiste beispielsweise die Klasse .large-3 erhalten um über die volle Breite der Seitenleiste zu laufen. Das hängt damit zusammen, dass sich das Container-Element verändert hat.

Das fertige Beispiel-Raster sieht so aus:

Verschachteltes CSS-Grid mit einem einspaltigen Raster auf kleinen Displays, einer mittleren Layouvariante mit sechs Spalten und einem dreispaltigen Layout für große Displays
Verschachteltes CSS-Grid mit einem einspaltigen Raster auf kleinen Displays, einer mittleren Layouvariante mit sechs Spalten und einem dreispaltigen Layout für große Displays

Beispiel anzeigen

Hilfsmittel und Tools

Eine Liste hilfreicher Frameworks und Tools zum Thema CSS-Grids findet ihr hier.

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!

Das könnte dich auch interessieren

17 Kommentare

  1. David Hellmann

    Verfasst am 12. November 2014 um 16:59 Uhr.

    Man sollte glaube ich wegkommen von HTML Klassen Frameworks. Sehe darin keinerlei Vorteile. Der Code wird aufgebläht und auch die Pflege ist deutlich aufwendiger als wie wenn ich ein Sass Framework nutze. Ich weiß, hier geht es nicht darum und du willst das System erklären. Aber ich würde den Part auf jeden Fall noch mit aufnehmen oder erwähnen.

    Sonst natürlich wie immer Top! :)

    • Jonas Hellwig

      Verfasst am 13. November 2014 um 0:19 Uhr.

      Ich bin nicht ganz sicher, ob ich verstanden habe was du meinst. Sass-Frameworks generieren doch auch CSS-Klassen. Es sind vielleicht etwas weniger Klassen und sie haben auch kürzere Namen, aber die großen Vorteile von Sass-Frameworks liegen doch eher in der Verbesserung des Workflows als in der Einsparung von HTML/CSS-Code. Oder was genau meinst du?

      • David Hellmann

        Verfasst am 13. November 2014 um 0:34 Uhr.

        Mit Sass Framework meine ich sowas:

        .box {
        @include span(6);
        }

        Das erzeugt dann keine Klasse und ich muss nicht an das HTML ran wenn ich was am GRID ändern möchte.

        Mit einem HTML Klassen Framework würdest du:
        … haben wobei das col-6 aus meiner Sicht da nicht hingehört.

      • Jonas Hellwig

        Verfasst am 13. November 2014 um 13:27 Uhr.

        Ah okay – du meinst eine Logik wie bei Susy. Da hast du vollkommen recht, das finde ich auch besser und sauberer. Ich könnte mir hier einen ergänzenden Artikel zu vorstellen – in diesem hier wäre es mir dann etwas zu viel auf einmal.

      • David Hellmann

        Verfasst am 13. November 2014 um 18:10 Uhr.

        Jo das stimmt wohl das es dann zu viel wird.

        Ich bau mir gerade auch ne Boilerplate zusammen mit Hilfe ein paar netter Leute. Ich finde bisher hat es kein Framework (Grid) geschafft mich zu überzeugen deswegen bau ich mir was eigenes kleines…

        Falls es dich interessiert: https://github.com/davidhellmann/dh_boilerplate/tree/master

        Ist wie gesagt alles noch im Bastelstadium aber es macht Spaß und wie immer lernt man dabei natürlich etwas :D

    • Alex

      Verfasst am 20. November 2014 um 23:55 Uhr.

      Es kommt aber auch auf die Komplexität der Anwendung an. Klassen lassen sich leicht immer wieder verwenden. Insgesamt finde ich es auch sauberer ohne html-Klassen, aber so pauschalisieren würde ich das nicht.

    • Raphael

      Verfasst am 7. September 2016 um 10:34 Uhr.

      …und mit einem Sass-Framework wird das CSS extrem ausgebläht.

  2. Stefan

    Verfasst am 13. November 2014 um 7:18 Uhr.

    Richtig guter Beitrag!

    Muss allerdings sagen, dass ich nicht so oft mit Frameworks arbeite. Bei meinen Kundenprojekten sind es meist nur kleine Websites für die es viel zu viel des Guten währe ein Framework zu verwenden.

    Vielleicht kommt in CSS4 ja eine neue Eigenschaft grid-count ähnlich dem column-count ;-)

    schöne Grüße
    Stefan

  3. Philipp Schnittger

    Verfasst am 13. November 2014 um 11:44 Uhr.

    Toller Beitrag, wie immer. Ich lese wirklich gerne deine Artikel.

  4. Mirco

    Verfasst am 13. November 2014 um 12:32 Uhr.

    Schöner Grundlagen-Beitrag.
    Wer noch mehr aus seinen Grids herausholen möchte, dem empfehle ich wärmstens:
    SUSY oder Singularity (sehr ähnlich).

    • David Hellmann

      Verfasst am 18. November 2014 um 10:31 Uhr.

      Angeschaut > für schlecht befunden.
      Ein Grid sollte keine Wissenschaft sein so sieht es aber leider aus.
      Und eine SCSS die nur noch aus @include’s besteht ist für mich auch nicht das was ich unter CSS verstehe.

      Aber jeder wie er mag :)

  5. andreas

    Verfasst am 14. November 2014 um 9:26 Uhr.

    hi, das ist ein netter artikel und erklärt eigentlich die funktionsweise des grid von bootstrap. egal ob preprocessor oder nicht, ich bin kein fan eines solchen grid.

    das man irgendwann mal eine inhaltliche aufteile mit zwei spalten für 50% / 50% oder 33% / 66% hat und deswegen solche klassen im html hat, kann ich noch nachvollziehen, aber für das layout?

    leider haben viele seiten heute ein cms, aber auch dort gibt es recht unhandliche mit zig template-dateien. ja, dann änder mal die breite vom content oder sidebar um. das layout soll eigentlich aus dem css und nicht aus dem html kommen.

    • David Hellmann

      Verfasst am 18. November 2014 um 10:33 Uhr.

      100% Agree.
      Da schreien wir immer alle das wir Layout vom Inhalt trennen wollen und dann packen wir zischen Grid Klassen in die Templates die sehr wohl was mit Layout zu tun haben. Will ich was ändern muss ich immer auch an die HTML Files ran.

  6. Florian

    Verfasst am 16. November 2014 um 18:54 Uhr.

    Super Beitrag, Danke :)

    Ich möchte Mirco’s Empfehlungen nochmal bekräftigen. Wir haben sehr gute Erfahrungen mit Susy gemacht. Der Unterschied zu Singularity liegt in der Layoutart. Singularity ist „Zen“-based und Susy ist Float based.

    Da Float-Based Layouts noch sehr viel öfters anzutreffen sind findet man zu Susy schneller mal einen Eintrag auf z.B. Stackoverflow wenn es zu Problemen kommt.

  7. Oliver Berghold

    Verfasst am 26. Dezember 2014 um 19:28 Uhr.

    Sehr schöner Beitrag von Jonas, der – wie ich finde – sehr gut die Funktionsweise populärer CSS-Frameworks, wie z.B. Bootstrap oder Foundation erklärt. Die Diskussion in den Kommentaren geht allerdings in eine andere Richtung. Ich würde mich ebenfalls freuen, zum Thema Trennung von HTML und CSS etwas mehr zu lesen, bzw. darüber zu diskutieren.
    Danke für den Artikel!

  8. Ralf

    Verfasst am 3. April 2015 um 18:13 Uhr.

    also ich kann nur sagen VIELEN DANK !

    die Erklärungen sind klasse und endlich hab ich durch Deine „Sidebar“ eine Möglichkeit gefunden 5 Zellen je nach Viewport mal untereinander und mal nebeneinander zu bekommen :-)

  9. Mike

    Verfasst am 26. April 2015 um 2:13 Uhr.

    Man lernt nie aus. Sehr schön erklärt. In Verbindung mit Less ist das Ganze noch viel angenehmer.

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.