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.
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 Viewports linear nacheinander, auf größeren ViewPorts 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.
Sowohl bei Grids mit display:flex als auch mit display:grid werden die Zellen innerhalb einer Zeile automatisch gleich hoch.
display: grid wird ebenfalls von allen modernen Browsern unterstützt (IE11 und älteren Versionen von EDGE nur eingeschränkt und mit Browserpräfix).
Positionieren: Rows und Columns
Jedes Grid-System hat seine individuelle Syntax, aber das grundlegende Konzept ist bei allen Grid-Systemen dasselbe.
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.
- 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.
.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: grid;
grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
grid-gap: 2vw;
}
}
