CSS Grid Layout
… oder wollen wir lieber sagen: ASCII Art Layout?
Es wird Zeit sich mit einem neuen Layoutmodul auseinanderzusetzen. Lange Zeit waren Floats das Mittel der Wahl für Layouts von Webseiten. Dann kam Flexbox, das aber auch nur partiell Lösungen z.B. für eine Navigationsleiste bietet, da es sich um eine eindimensionales Layoutsystem handelt (eine Zeile oder eine Spalte). Ein generelles zweidimensionales Layoutsystem (eine Zeile und eine Spalte) fehlte in CSS. Daher entstanden zahlreiche Grid-Frameworks und Techniken für flexible Layouts im responsive Webdesign.
CSS Grid ist ein universales zweidimensionales CSS Layoutsystem und neben Flexbox und Multicolumn das dritte im Bunde der CSS3-Layout-Modelle. Lustigerweise war einer der ersten Browser, der display:grid verstand der Internetexplorer. Bei der Spezifikation war Microsoft stark beteiligt. Da nun aber auch Firefox in Version 52 Grid Layout ohne Flag unterstützt, lohnt es sich diese mächtige CSS Technik genauer anzuschauen.
Ich möchte hier nur ein kurzes Beispiel bringen: Ein Layout, das die volle Viewporthöhe und -breite einnehmen soll und einen Kopfabschnitt, Hauptabschnitt mit Marginalie und einen Fußabschnitt umfassen soll. Hauptteil und Marginalie stehen auf dem Desktop in einer Zeile, auf kleineren Bildschirmen untereinander.
See the Pen Grid by uli schaeffler (@ulrischa) on CodePen.
Schaut man sich das CSS an, wird deutlich warum ich eingangs ASCII Art geschrieben habe. Man kann mit grid-template-areas das Layout quasi textuell skizzieren. Layoutbereiche werden in der jeweiligen Zeilen- und Spaltenposition benannt. Jeder String (also eingeschlossen durch Anführungszeichen), kennzeichnet eine Zeile. Splaten in dieser Zeile werden durch einzelne Wörter getrennt durch Leerzeichen signalisiert. Statt einem Wort kann man auch einen Punkt schreiben. Dies bedeutet dass dieser Bereich leer bleiben soll.
Die einzelne Zuweisung der Container zu diesen Bereichen erfolgt dann separat über grid-area. Somit ist das Layout unabhängig von der Reihenfolge der Container im Quellcode und kann z.B. für ein responsive Design jederzeit und unkompliziert umsortiert werden.
Weitere Infos und Hintergründe zum Grid Layout finden sich bei folgenden Quellen:
Browsersupport
Grid template areas bei MDN
Unterschied Flexbox und Grid
Beispiele für Umsetzungen mit Grid
Deutsches Tutorial
Als erster einen Kommentar schreiben.
Schreibe einen Kommentar