Kurzfassung
Wenn Sie mit Flexbox vertraut sind, sollte Ihnen Grid bekannt vorkommen. Rachel Andrew betreibt eine hervorragende Website zu CSS Grid, die Ihnen den Einstieg erleichtert. Das Grid-Layout ist jetzt in Google Chrome verfügbar.
Flexbox? Raster?
In den letzten Jahren hat sich CSS Flexbox weit verbreitet und die Browserunterstützung ist wirklich gut (es sei denn, Sie gehören zu den Unglücklichen, die IE9 und niedriger unterstützen müssen). Mit Flexbox wurden viele komplexe Layoutaufgaben einfacher, z. B. das Erstellen von gleichmäßigen Abständen zwischen Elementen, das Anordnen von Elementen von oben nach unten oder das vertikale Zentrieren.
Leider haben Bildschirme in der Regel eine zweite Dimension, die wir berücksichtigen müssen. Wenn Sie die Größe der Elemente nicht selbst festlegen, können Sie mit Flexbox leider nicht sowohl einen vertikalen als auch einen horizontalen Rhythmus erzielen. Hier kommt CSS Grid ins Spiel.
CSS Grid wurde über fünf Jahre lang hinter einem Flag in den meisten Browsern entwickelt. Es wurde viel Zeit in die Interoperabilität investiert, um einen fehlerhaften Start wie bei Flexbox zu vermeiden. Wenn Sie also Grid verwenden, um Ihr Layout in Chrome zu implementieren, ist es wahrscheinlich, dass Sie in Firefox und Safari dasselbe Ergebnis erhalten. Zum Zeitpunkt der Erstellung dieses Dokuments ist die Edge-Implementierung von Grid durch Microsoft veraltet (sie entspricht der in IE11). Das Update wird in Erwägung gezogen.
Trotz der Ähnlichkeiten in Konzept und Syntax sollten Sie Flexbox und Grid nicht als konkurrierende Layouttechniken betrachten. Grid wird in zwei Dimensionen angeordnet, Flexbox in einer. Die beiden Tools ergänzen sich gut.
Raster definieren
Um sich mit den einzelnen Eigenschaften von Grid vertraut zu machen, empfehle ich Ihnen Grid By Example von Rachel Andrew oder das Cheat Sheet von CSS Tricks. Wenn Sie mit Flexbox vertraut sind, sollten Ihnen viele der Eigenschaften und ihre Bedeutung bekannt sein.
Sehen wir uns ein Standard-Layout mit 12 Spalten an. Das klassische 12-spaltige Layout ist beliebt, da die Zahl 12 durch 2, 3, 4 und 6 teilbar ist und sich daher für viele Designs eignet. So implementieren Sie dieses Layout:
Beginnen wir mit unserem Markup-Code:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
In unserem Stylesheet beginnen wir damit, die body so zu erweitern, dass sie den gesamten Darstellungsbereich abdeckt, und sie in einen Grid-Container umzuwandeln:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Jetzt verwenden wir CSS Grid. Super!
Als Nächstes implementieren wir die Zeilen und Spalten unseres Rasters. Wir könnten alle 12 Spalten in unserem Mockup implementieren, aber da wir nicht jede Spalte verwenden, würde dies unser CSS unnötig unübersichtlich machen. Der Einfachheit halber implementieren wir das Layout so:
Die Kopf- und Fußzeile haben eine variable Breite und der Inhalt ist in beiden Dimensionen variabel. Die Navigationsleiste ist auch in beiden Dimensionen variabel, aber wir legen eine Mindestbreite von 200 Pixeln fest. Warum? Um die Funktionen von CSS Grid zu demonstrieren.
Im CSS-Raster werden die Spalten und Zeilen als Tracks bezeichnet. Beginnen wir mit der Definition der ersten Gruppe von Tracks, den Zeilen:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows verwendet eine Folge von Größen, die die einzelnen Zeilen definieren.
In diesem Fall erhält die erste Zeile eine Höhe von 150 px und die letzte eine Höhe von 100 px.
Die mittlere Zeile ist auf auto festgelegt. Das bedeutet, dass sie sich an die erforderliche Höhe anpasst, um die Rasterelemente (die untergeordneten Elemente des Rastercontainers) in dieser Zeile aufzunehmen. Da sich der Body über den gesamten Viewport erstreckt, füllt der Track mit dem Inhalt (gelb im Bild oben) mindestens den gesamten verfügbaren Platz aus. Er wird jedoch größer (und das Dokument wird gescrollt), wenn dies erforderlich ist.
Für die Spalten möchten wir einen dynamischeren Ansatz wählen: Sowohl die Navigation als auch der Inhalt sollen wachsen und schrumpfen, aber die Navigation soll nie unter 200 Pixel schrumpfen und der Inhalt soll größer als die Navigation sein. In Flexbox würden wir flex-grow und flex-shrink verwenden, aber in Grid ist es etwas anders:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Wir definieren zwei Spalten. Die erste Spalte wird mit der Funktion minmax() definiert, die zwei Werte akzeptiert: die Mindest- und die Maximalgröße des Tracks.
(Es ist wie min-width und max-width in einem.) Die Mindestbreite beträgt, wie bereits erwähnt, 200 Pixel. Die maximale Breite beträgt 3fr. fr ist eine gridspezifische Einheit, mit der Sie den verfügbaren Platz auf die Gridelemente verteilen können. fr steht wahrscheinlich für „fraction unit“ (Bruchteileinheit), könnte aber auch bald „free unit“ (kostenlose Einheit) bedeuten.
Unsere Werte bedeuten, dass beide Spalten so breit werden, dass sie den Bildschirm ausfüllen. Die Inhaltsspalte ist jedoch immer dreimal so breit wie die Navigationsspalte (vorausgesetzt, die Navigationsspalte ist breiter als 200 Pixel).
Die Platzierung der Rasterelemente ist noch nicht korrekt, aber die Größe der Zeilen und Spalten verhält sich korrekt und führt zum gewünschten Ergebnis:
Elemente platzieren
Eine der leistungsstärksten Funktionen von Grid ist die Möglichkeit, Elemente unabhängig von der DOM-Reihenfolge zu platzieren. Da Screenreader jedoch das DOM durchlaufen, empfehlen wir dringend, beim Neuanordnen von Elementen auf die Barrierefreiheit zu achten. Wenn keine manuelle Platzierung erfolgt, werden die Elemente in der DOM-Reihenfolge im Raster platziert, von links nach rechts und von oben nach unten. Jedes Element belegt eine Zelle. Die Reihenfolge, in der das Raster gefüllt wird, kann mit grid-auto-flow geändert werden.
Wie platzieren wir Elemente? Die wohl einfachste Methode zum Platzieren von Rasterelementen besteht darin, die Spalten und Zeilen zu definieren, die sie abdecken. Für das Raster gibt es zwei Möglichkeiten, dies zu tun: Bei der ersten Syntax definieren Sie Start- und Endpunkte. Im zweiten Fall definieren Sie einen Startpunkt und einen Zeitraum:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Die Kopfzeile soll in der ersten Spalte beginnen und vor der dritten Spalte enden. Die Navigation sollte in der zweiten Zeile beginnen und sich über insgesamt zwei Zeilen erstrecken.
Technisch gesehen haben wir unser Layout fertig implementiert. Ich möchte Ihnen aber noch einige praktische Funktionen zeigen, die Grid bietet, um die Platzierung zu erleichtern. Erstens können Sie Ihren Trackgrenzen Namen geben und diese Namen für die Platzierung verwenden:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
Der Code oben führt zum gleichen Layout wie der vorherige Code.
Noch leistungsfähiger ist die Möglichkeit, ganze Bereiche im Raster zu benennen:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
Für grid-template-areas wird ein String mit durch Leerzeichen getrennten Namen verwendet, sodass der Entwickler jeder Zelle einen Namen geben kann. Wenn zwei benachbarte Zellen denselben Namen haben, werden sie zum selben Bereich zusammengefasst. So können Sie Ihrem Layoutcode mehr Semantik hinzufügen und Media-Queries intuitiver gestalten. Auch dieser Code generiert dasselbe Layout wie zuvor.
Gibt es noch mehr?
Ja, es gibt viel zu viel, um es in einem einzigen Blogbeitrag zu behandeln. Rachel Andrew, die ebenfalls GDE ist, ist eingeladene Expertin in der CSS Working Group und arbeitet seit Beginn mit ihr zusammen, um sicherzustellen, dass Grid das Webdesign vereinfacht. Sie hat sogar ein Buch darüber geschrieben. Ihre Website Grid By Example ist eine wertvolle Ressource, um sich mit Grid vertraut zu machen. Viele halten Grid für einen revolutionären Schritt für das Webdesign. Es ist jetzt standardmäßig in Chrome aktiviert, sodass Sie es noch heute verwenden können.