CSS, HTML und Javascript mit {stil}

CSS Positionieren: Grid Systeme

CSS Grid System

Ein Layout mit zwei, drei oder vier Spalten mit den modernen Browsern oder der langjährigen Erfahrung im Umgang mit CSS-Eigenschaften für Positionierung – vor allem float – keine große Herausforderung mehr.

Aber heute gehört responsives Webdesign zu den grundlegenden Anforderungen an einen Internet-Auftritt. Auf kleinen Monitoren sollen die Spalten kollabieren und untereinander rutschen: An dieser Stelle kommen Grid-Systeme ins Spiel.

Grid-Systeme sind CSS-Packs, die ein zeilen- und spaltenorientieres Layout vereinfachen. Typischerweise haben Grid-Systeme 12 bis 16 Spalten und ein einfaches Zuweisen von CSS-Klassen reicht, um komplexe responsive Layouts aufzuziehen. Das Grid-System kümmert sich um all die Ecken und Kanten der Browser.

Beim traditionellen Spaltenlayout rutscht die komplette Navigation auf kleinen Monitoren unter den Inhalt und erscheint dann schnell zusammenhanglos.

Webdesign – Seitenlayout traditionellHeaderMainSitebarNavigationHeaderMainSidebarNavigation
Webdesign – Rows and Columns Header Header Article Article Article Article Article Aside Aside Aside Aside Aside Aside Aside Aside Aside Aside

Das zeilenorientierte Raster eines Grid-Systems kann die Inhalte auflockern und gleichzeitig passende Inhalte beisammen halten.

Webseiten-Layout: Trends

Mit CSS Flex oder Flexbox bekommen wir ein Model für das Design von Webseiten, das uns völlig neue Sichtweisen auf das Positionieren von Blöcken erleichtert.

Noch leidet CSS Flexbox unter Browser-Bugs und kleinen Inkompatibilitäten. Es gibt einen weiteren Ansatz für das Positionieren und Ausrichten von Blöcken – CSS Grid. CSS Grid wird bislang nur von Internet Explorer unterstützt und steht weder bei Chrome, Firefox oder Safari auf dem Plan. Am 12. Januar 2016 fällt IE9 aus dem Support von Microsoft, wird aber sicher noch für viele Webseiten auf der Liste der unterstützten Browser bleiben. So sind die klassischen Grid-Systeme noch eine Weile die beste Erleichterung beim zeilen- und Spalten-orientierten Webdesign.

Positionieren mit CSS-Grid-Systemen

Jedes Grid System hat seine individuelle Syntax, aber das grundlegende Konzept ist bei allen Grid Systemen dasselbe.

CSS Grid: Rows und Columns mit FloatColumnAbstandROW

Grid-Systeme haben natürlich auch ihre Schattenseiten: Die Zeilen und Spalten erfordern zusätzliches – nicht semantisches – HTML-Markup.

Die großen Frameworks wie Foundation und Bootstrap bringen immer ein Grid-System mit. Wer die überwältigenden Frameworks scheut, kann auf unzählige unabhängige Grid-Systeme zurückgreifen.

  • 960 Grid System ein frühes Grid-System, noch nicht responsive. Das 960 Grid System ist das Mutterschiff der Grid-Systeme: Seine Syntax ist von vielen moderneren Grid-Systemen übernommen worden.
  • Golden Grid – Minimales Grid, das Spalten auf kleinen Monitoren zusammenfaltet.
  • Fluid Baseline Grid – schon fast ein Framework – mit großem Gewicht auf Typographie.
  • Das Grid faltet sind zu einer Spalte auf kleinen Monitoren, zwei Spalten bei Tabletts und drei Spalten auf dem Desktop. Mit 18 KB ist Fluid Baseline Grid – kurz FBG – ausgesprochen sparsam im Verbrauch.
  • Responsive Grid System hat 12, 16 oder 24 Spalten im Angebot und zieht ältere Browser durch Respond.js als Polyfill mit.
  • Responsive Grid System. Hier muss nicht das ganze CSS-Paket geladen werden, sondern wenn klar ist, dass 3 oder 4 Spalten für das Layout reichen, konfektioniert der Grid Generator das CSS.
    So klein, bietet aber schon Spalten gleicher Höhe – allerdings muss dafür jQuery vorliegen.
  • SKELETON A dead simple, responsive boilerplate
    Die komplette Dokumentation auf einer Seite – eine hervorragende Startposition.

Features von Grid-Systemen

Die meisten Grid-Systeme sind durchgehend flexible – d.h., dass auch Text bei jeder Veränderung des Browserfensters neu umgebrochen wird.

Wenn ein Grid-System »Folding« beherrscht, können die Blöcke bei mittleren und großen Monitoren neu angeordnet werden. Z.B.

  • Auf großen Monitoren 4 Blöcke in einer Zeile, auf mittelgroßen Monitoren 2 Blöcke in zwei Reihen.
  • Auf großen Monitoren 6 Blöcke in einer Zeile, auf mittelgroßen 3 Blöcke in zwei Reihen, auf kleinen Monitoren 2 Blöcke in drei Reihen.

Ein hochgerüstetes Grid-System kann Zeilen in Spalten verschachteln.

Grid-Systeme, die alle Schmankerln beherrschen, sind rar. Die komfortabelsten Grid-Systeme finden wir erst in den großen Frameworks wie Bootstrap und Foundation, aber dort muss man mit großen CSS-Dateien und heftigen Javascript plus jQuery-Einsatz rechnen.

Spalten positionieren

CSS gibt uns float, display:inline-block, display-table und display-flex für ein spalten-orientiertes Webdesign. display: flex ist die eleganteste Technik, aber noch von Browser-Inkompatibiliät belastet. IE9 unterstützt display: flex noch nicht.

CSS float ist und bleibt die griffigste Methode – darum setzen alle Grid-Systeme, CSS-Frameworks und Boilerplates auf float.

Grid-Systeme unterteilen die Zeilen allesamt ähnlich in Spalten:

[class*='colspan'] { width: 100%; float: left; box-sizing: border-box }
  
.col-1 { width: 16.66% }
.col-2 { width: 33.33% }
.col-3 { width: 50% }
.col-4 { width: 66.664% }
.col-5 { width: 83.33% }
.col-6 { width: 100% }

[class*='colspan'] ist ein »fast«-Universal-Selector: Alle CSS-Klassen, der Bezeichnung mit 'colspan' anfängt.

Bevor CSS box-sizing auf den Plan trat, war ein spalten-orientiertes Design auf Prozent-Basis harte Arbeit mit stetem Anlass zu frustrierenden Fehlern. Bei box-sizing: border-box werden padding und border mit zur Spaltenbreite gezählt. box-sizing: border-box wird bereits von IE8 unterstützt.

Zeilen erzeugen

Zeilen verhindern, dass die Spalten in die nächste Reihe überfließen und werden durch ein Wrapper-Element ROW umgesetzt.

.row:after {
   content: "";
   display: table;
   clear: both 
}

Die Regel für das HTML-Markup von ROWS und COLUMNS lautet: In jeder ROW müssen sich die Spaltenbreiten zu 100% ergänzen.

<div class="row">
   <div class="col-1"><p>Spaltenbreite 16,66%</p></div> 
   <div class="col-3"><p>Spaltenbreite 50%</p></div> 
   <div class="col-2"><p>Spaltenbreite 33,33%</p></div>
</div>

Das Grid selber ist also einfach gestrickt. Damit das Grid-System responsive wird, muss festgelegt werden, wie die Spalten bei den Breakpoints kollabieren.

Für die kleinsten Monitore bleibt die Spaltenbreite immer 100%: Alle Spalten rutschen untereinander.

Ab 480px Breite gibt es zwei Spalten, ab 720px Breite drei Spalten, ab 1260px Breite treten 6 Spalten in Kraft.

body {background: #efefef}
.row:after { content: ""; display: table; clear: both  }
[class*='colspan'] { 
   width: 100%; 
   float: left; 
   box-sizing: border-box; 
   padding: 0.5em 1em; 
   border:1px solid silver; 
   background: white 
}

@media (min-width:400px) {
   .colspan1 { width: 50%; }
   .row .colspan5 ~ .colspan1{ width: 100%; }
}

@media (min-width:720px) {
   .colspan1 { width: 33.33%; }
   .colspan2 { width: 50%; }
   .colspan3 { width: 50%; }

	.row .colspan2:last-of-type { width: 100% }
}

@media (min-width:1260px) {
   .colspan1 { width: 16.66%; }
   .colspan2 { width: 33.33%; }
   .colspan3 { width: 50%; }
   .colspan4 { width: 66.66%; }
   .colspan5 { width: 83.33%; }
   .colspan6 { width: 100%; }
   .row .colspan5 ~ .colspan1{ width: 16.66%; }
   .row .colspan2:last-of-type { width: 33.33%; }
}

Bis auf ein paar Ausnahmeregeln war's das. Ausnahmen treten auf bei

@media (min-width:480px)

Wenn Spaltenbreite 1 und Spaltenbreite 5 einer einer Zeile sitzen (in der Sprache der CSS-Selektoren indirekte Nachbarn sind). In so einem Fall muss Spaltenbreite 1 auf 100% gedehnt werden.

.row .colspan5 ~ .colspan1 { width: 100% }

@media (min-width:720px)

Wenn drei Spalten mit Spaltenbreite 2 zusammen in einer Zeile sitzen

.row .colspan2:last-of-type { width: 100% }

In @media (min-width:1260px) müssen die Ausnahmen wieder zurückgenommen werden.

	.row .colspan5 ~ .colspan1{ width: 16.66%; }
	.row .colspan2:last-of-type { width: 33.33%; }

Die Ausnahmen müssen im nächsten Breakpoint zurück genommen werden.

Demo: Spartian Grid

Zusammen ist das nur die Spitze des Eisbergs bis zu einem zuverlässigen responsiven Grid-System. Am Ende sind die Grids der großen Frameworks Bootstrap und Foundation das Null Plus Ultra, wenn auch zu hohen Kosten.