CSS Positionieren: Grid Systeme

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

Ein responsives Webdesign ist eine grundlegende Anforderungen an jeden Internet-Auftritt. Für ein Design mit zwei, drei und mehr Spalten kommt immer dasselbe Muster zum Tragen:

Auf kleinen Monitoren sollen die Spalten kollabieren und untereinander rutschen. Sobald der Platz im Browserfenster reicht, 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.

Klassisches Layout mit Header und Sidebar

Das Raster eines Grid-Systems mit der Möglichkeit, die Zellen des Grids an den Breakpoints zu ordnen, kann die Inhalte auflockern und gleichzeitig passende Inhalte beisammen halten.

Grid für Tablets und Desktop-Monitore

Webseiten-Layout: Trends

CSS Flexbox – display: flex ist ein moderner und stabiler Ansatz für das Layout von Webseiten: elegant und effizient.

display: flex wird von allen modernen Browser unterstützt, in IE10 allerdings nur mit einem Browserpräfix und einer veralteten Syntax, aber IE10 wird von Microsoft nicht mehr unterstützt und kaum noch auf den Plan.

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

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

CSS Grid: Rows und Columns

Die traditionellen Grid-Systeme auf der Basis von CSS float hatten ihre Schattenseiten: Die Zeilen und Spalten erfordern zusätzliches – nicht semantisches – HTML-Markup. Ein modernes Grid-System setzt auf display: flex oder display: grid.

Die großen Frameworks wie Foundation und Bootstrap (in der Mini-Fassung 141 KB!) bringen immer ein Grid-System mit. Wer die überwältigenden Frameworks scheut (Stop (ab)using Bootstrap / foundation), 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.
  • Flexbox-Grid kommt mit nicht einmal 20 KB aus.
  • FROW Flexbox Toolkit & Grid

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.

Vor display: flex und display: grid war CSS float die griffigste Methode. 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 Nägelkauen und Alpträumen. Darum setzten Webdesigner auf stabile CSS-Frameworks mit ihren Grid-Systemen, die auf float basierten und die Zeilen allesamt ähnlich in Spalten unterteilten:

[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, deren Bezeichnung mit 'colspan' anfängt.

Anders als diese alten Grid-Systeme sind die modernen CSS-Grids mit display: flex einfach, effizient und stabil. Die Lernkurve für ein zeilen- und spaltenorientiertes Layout ohne eine Flut von CSS-Klassen und mit semantischem HTML ist steil.

1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
.flex-cell {  
   margin-bottom: 1em;  
   display: flex; 
   flex-direction: column; 
   justify-content: center; 
   align-items:center; 
}
@media (min-width: 680px) {
   .flex-raster { display: flex; }
   .flex-cell {flex: 1; margin: 1em 0 0 1em;}
   .flex-cell:nth-child(1) { margin: 1em 0 0 0em;}
}

display: grid könnte in vielen Fällen sogar noch eleganter sein, aber einem flexiblen CSS-Grid steht IE11 gegenüber, der nicht nur einen Browser-Präfix braucht, sondern auch noch auf eine alte Version des Standards hört, in der Funktionen einfach fehlen.

@media (min-width:450px) {
	.simple-grid {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: repeat(12, 1fr);
		grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
		grid-gap: 2vw;
	}
}