Grid Systeme

CSS Positionieren: display:grid

Layoutraster der Webseite: CSS float, CSS display:flex und display: grid

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Zeilen und Spalten mit CSS

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.

Das Raster eines Grid-Systems eröffnet die Möglichkeit, die Zellen des Grids an den Breakpoints zu ordnen, lockert die Inhalte auf und hält gleichzeitig passende Inhalte beisammen.

Icon

CSS flex und grid

CSS Flexbox – display: flex ist ein moderner und stabiler Ansatz für das Layout von Webseiten: elegant und effizient. Wer sich bereits in die Gutenberg-Themes von WordPress vertieft hat: Hinter dem Spaltenlayout sitzt display: flex.

Die Inhalte liegen in kleinen Viewport linear nacheinander, auf größeren ViewPort zeigt die Flexbox zwei Spalten, auf noch größeren Browserfenstern eine Zeile mit vier Spalten.

display:flex wird von allen modernen Browser unterstützt.

display: grid ist ein weiterer Ansatz für das Positionieren und Ausrichten von Blöcken – mächtiger und flexibler als display:flex (wenn man's braucht). Das CSS-Grid wirkt wie eine Tabelle, aber obwohl die Inhalte linear nacheinander folgen, kann jedes Grid-Element einer speziellen Zelle zugeordnet werden.

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, und IE11 ist mehr oder minder aus dem Web verschwunden.

Sowohl bei Grids mit display:flex als auch mit display:grid werden die Zellen innerhalb einer Zeile automatisch gleich hoch.

Positionieren: Rows und Columns

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

Schema Grid-Raster für Webseitenlayout

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 wie tailwindcss setzt auf CSS 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.

  • Basscss / Low-level CSS toolkit Modernes CSS: modular, einfach und effizient.
  • 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 heutigen 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;
	}
}