CSS, HTML und Javascript mit {stil}

CSS Positionieren: Grid Systeme

Techniken für ein Layoutraster: CSS float, CSS display:flex und display: grid

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 neue Sichtweisen auf das Positionieren von Blöcken rtöggnrz.

display: flex wird von allen modernen Browser unterstützt, von IE10 (wird von Microsoft nicht mehr unterstützt) allerdings nur mit einem Browserpräfix und einer veralteten Syntax.

display: grid ist ein weiterer Ansatz für das Positionieren und Ausrichten von Blöcken. CSS Grid wird heute ebenfalls von allen modernen Browsern unterstützt, aber von IE11 und älteren Versionen von EDGE nur eingeschränkt und mit Browserpräfix. Am 18.10.17 hat Microsoft angekündigt, dass die Herbst-Version von EDGE auf die aktuelle Version von CSS GRID umsteigt, aber IE11 bleibt noch lange Zeit im Support (Update CSS Grid).

Positionieren: Rows und Columns mit Float

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

CSS Grid: Rows und Columns mit Float

Grid-Systeme auf der Basis von CSS float haben 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 kleinere Grid-Systeme zurückgreifen.

  • 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. 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 flexibel bzw. responsive – 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.

Vor display: flex und display: grid war CSS float die griffigste Methode – darum setzten 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 und CSS calc auf den Plan traten, 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.

C S S G R I D Y S T S M CSS Grid: Rows und Columns mit Float ColumnAbstandROW