The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but
if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a simple grid.
(Chris Coyier, css-tricks.com)
Idee
Grid-Layout ist eher Standard sowohl im Print- als auch im Web-Design. Die in Spalten und Zeilen eingeordneten
Inhalte sind für das menschliche Auge leichter wahrzunehmen und zu verarbeiten.
Das w3-Consortium hat die Arbeit an CSS-Grid schon 2012 angefangen. Nach vier Jahren wurde es aus dem Status
'Technologie in Entwicklung' in den Status 'empfohlene Technologie' überführt. Heutzutage (Juni'19) wird
CSS-Grid von 92% aller Browser unterstützt.
Zusammen mit der Flex-Box (display: flex) lassen sich dadurch fast alle erdenklichen Layouts realisien.
Mit Hilfe von display:grid kann man einen bestimmten Teil
oder die ganze Fläche der Seite mit einem Raster versehen. Hier wird ein
Szenario vorgeschlagen, wo man die gesamten Inhalte einer Webseite in ein Grid
packen will. Dabei soll ein typisches 3-Spalten-Layout entstehen. Dieses Layout
besteht aus den sogenannten semantischen Tags: <header>, <nav>,
<article>, <section>, <aside> und <footer>. Diese
Webseite kann beispielsweise folgendermaßen aussehen:
Die Tags article, section und aside sind hier nicht korrekt
eingesetzt. Article und aside sind üblicherweise Unterelemente von section.
Aber hier geht es nicht darum. Hauptsache, wir haben sechs unterschiedliche
Objekte, die in ein Raster eingebaut werden können:
Vorbereitung
Bevor man zum Grid übergeht, muss die Fläche der Seite noch etwas vorbereitet werden.
Der verfügbare Platz wird prozentual in Spalten und Zeilen aufgeteilt. Damit wir
das gesamte Viewport zur Verfügung haben, sollen wir die Höhe von <html>
und <body> auf 100% setzen. Vom Typ her sind es Block-Elemente, deshalb
sind sie per default nur so hoch wie deren Inhalt. Unser Ziel ist
aber, unabhängig vom Inhalt die gesamte Höhe von Viewport zu verwenden, deswegen:
Auch margin wurde bei <body> auf 0 gesetzt, weil initial-Wert bei body
8px ist. Will man den weißen Rahmen beibehalten, muss man mit dem margin
nichts tun.
Prinzip von Grid
Wie bei der Flexbox, wird das Verhalten der Grid-Items über
ein Elternelement beeinflusst. Die display-Eigenschaft dieses Elternelements
(nennen wir es mal Grid-Container) setzt man auf grid. Um keine zusätzlichen
Elemente in das Beispiel einzuführen, wurde hier gleich body als Grid-Container
eingesetzt. Beim Grid-Container definiert man, wie viele Spalten und evtl. wie
viele Zeilen es haben soll und in welchem Größenverhältnis sie zu einander
stehen. Um das Layout aus dem ersten Bild zu erreichen, kann man die gesamte
Fläche so aufteilen:
Bei grid-template-columns stehen drei Größenangaben. Damit
wurde die gesamte Breite von <body> in drei Spalten geteilt und die
mittlere Spalte ist etwas mehr als dreimal breiter als die restlichen. Wir
merken uns für später das Verhältnis der Spalten: 1 zu 3 zu 1. Die Höhe von
<body> wurde in vier Zeilen geteilt und die zweite Zeile ist fast viermal
höher als die restlichen. Verhältnis: 1 zu 4 zu 1 zu 1. Hier ist das Resultat:
Was wir da sehen – Es ist ein 3x4-Raster entstanden. Die
Breiten von Spalten und die Höhen von Zeilen entsprechen unseren Angaben. Die
zwei letzten Zeilen sieht man aber nicht, weil sie noch leer sind. Alle
Kindelemente vom Grid-Container (<body>) wurden automatisch in die Zellen
des entstandenen Rasters platziert. Es sind sechs Kindelemente, deswegen nur sechs Zellen sind im Moment befüllt.
Elemente aufspannen
In dem Ziel-Layout sind <header>, <aside> und
<footer> 100% breit, sprich über alle drei Spalten aufgespannt. Das kann
man mit der folgenden CSS-Eigenschaft erreichen:
Resultat:
Äquivalent zu grid-column-end kann man auch
grid-column-start angeben. Es gibt auch mehrere weitere Möglichkeiten, wie man
die Elemente im Grid unterbringt, aufspannt oder wie man bestimmte Grid-Zellen
leer stehen lässt. Grid-Lines, Grid-Areas als Beispiel. Wir bleiben in diesem Blog-Artikel aber bei den für
unser
Beispiel nötigen Grundlagen.
Fraction
Fügt man noch die Abstände zwischen den Elementen mit Hilfe von
grid-gap hinzu, entstehen dadurch unten und rechts die unerwünschten Scrollbalken,
weil die Elemente zusammen mit den Abständen nicht mehr in das Viewport
reinpassen:
Um die Balken wieder verschwinden zu lassen, muss man die
Prozentangaben mit Rücksicht auf Gaps neu berechnen. Diese Rechnungsarbeit
übernimmt für uns die Größeneinheit, die extra für {display: grid;} eingeführt
wurde - fraction. Anstatt Prozente zu berechnen, reicht es, die Verhältnisse zwischen
den Spalten und zwischen den Zeilen anzugeben. Bei Spalten war es 1 – 3 – 1, bei
Zeilen 1 – 4 – 1 – 1:
Resultat:
Im Unterschied zu %-Unit wird der verfügbare Platz bei
fr-Unit erst nach der Berechnung von Gaps aufgeteilt. Auch ist es in Fractions leichter
zu rechnen, als in Prozent.
Bemerkung
Generell ist es bei grid-template-Eigenschaften erlaubt,
alle gängigen CSS-Units zu verwenden. Beispielsweise:
Der freie Platz wird erst für die Zeilen (rows) mit festen
Größenangaben genommen (px). Dann sind die relativen Angaben dran (em, %). Und
am Ende kommen Fractions ins Spiel. Will man keine Zahlen im Kopf haben,
sondern einfach nur den restlichen Platz einer Zeile frei geben, nutzt man 'auto'.
Fazit
CSS-Grid erinnert eventuell an die Zeiten, als man die Seiten
mit Hilfe von <table> layoutet hatte. Da hatte man auch mit Spalten und
Zeilen gearbeitet. Ganz großer Unterschied – Grid ist responsiv, Grid übernimmt viel
Rechnungsarbeit beim Anpassen von Elementen. Semantisch ist es falsch,
Tabellen einzusetzen und das macht eigentlich keiner mehr. Grids lassen sich
auch verschachteln. Grid kann man auch automatisieren, wenn man am Anfang nicht
weiß, wie viele Inhalte in das Grid reinkommen. Zusammen mit anderen Layoutmöglichkeiten
wie Flexbox, Floating, Position, Box-Model usw. lassen sich jetzt beliebige
Layouts mit Hilfe von reinem CSS realisieren, ohne <table> und ohne zusätzliche
Layout-Frameworks.
Den gesamten Code von diesem Beispiel können Sie sich
hier anschauen und eventuell
ausprobieren.