Kurzfassung
Wenn Sie mit der Flexbox vertraut sind, sollte Grid sich Ihnen vertraut anfühlen. Rachel Andrew betreibt eine tolle Website zum CSS Grid, um dir den Einstieg zu erleichtern. Das Raster ist jetzt in Google Chrome verfügbar.
Flexbox? Raster?
CSS Flexbox hat sich in den letzten Jahren weit verbreitet und die Browserunterstützung sieht sehr gut aus (es sei denn, Sie gehören zu den armen Köpfen, die IE9 und niedriger unterstützen müssen). Flexbox erleichterte viele komplexe Layoutaufgaben wie der gleichmäßige Abstand zwischen Elementen, von oben nach unten angeordnete Layouts oder den heiligen Gral der CSS-Magie: die vertikale Zentrierung.
Leider haben Bildschirme häufig eine zweite Dimension, um die wir uns kümmern müssen. Da Sie nur auf die Größenanpassung der Elemente selbst achten müssen, können Sie mit der Flexbox allein nicht sowohl einen vertikalen als auch einen horizontalen Rhythmus haben. Hier kommt CSS Grid ins Spiel.
CSS Grid befindet sich seit über 5 Jahren in der Entwicklung und wird in den meisten Browsern hinter einem Flaggen stand. Außerdem wurde zusätzliche Zeit in die Interoperabilität aufgewendet, um einen sprunghaften Start wie bei der Flexbox zu vermeiden. Wenn Sie also zum Implementieren Ihres Layouts in Chrome ein Raster verwenden, sehen Sie wahrscheinlich in Firefox und Safari dasselbe Ergebnis. Zum Zeitpunkt der Entstehung dieses Artikels war die Edge-Implementierung von Microsoft Edge veraltet (dieselbe wie bereits in IE11 vorhanden) und das Update wurde als "wird in Betracht gezogen" geführt.
Trotz der Ähnlichkeiten in Konzept und Syntax können Sie Flexbox und Grid nicht als konkurrierende Layouttechniken betrachten. Das Raster ist in zwei Dimensionen angeordnet, die Flexbox in einer. Wenn Sie beide zusammen verwenden, ergeben sich Synergien.
Raster definieren
Um sich mit den einzelnen Eigenschaften von Grid vertraut zu machen, empfehlen wir Rachel Andrews Grid By Example oder die CSS-Tricks-Übersicht von Rachel Andrew. Wenn Sie mit Flexbox vertraut sind, sollten Sie mit vielen der Eigenschaften und ihrer Bedeutung vertraut sein.
Sehen wir uns ein Standard-Rasterlayout mit 12 Spalten an. Das klassische 12-spaltige Layout ist beliebt, da die Zahl 12 durch 2, 3, 4 und 6 teilbar ist und daher für viele Designs nützlich ist. Implementieren wir dieses Layout:
Beginnen wir mit unserem Markup-Code:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
In unserem Stylesheet erweitern wir zuerst body, sodass es den gesamten Darstellungsbereich abdeckt, und wandeln ihn in einen Rastercontainer um:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Jetzt verwenden wir das CSS-Raster. Juhu!
Im nächsten Schritt implementieren Sie die Zeilen und Spalten des Rasters. Wir könnten alle zwölf Spalten in unser Modell implementieren, aber da wir nicht jede Spalte verwenden, wäre unser CSS unnötig unübersichtlich. Der Einfachheit halber implementieren wir das Layout so:
Die Breite der Kopf- und Fußzeile ist variabel. Der Inhalt ist in beiden Dimensionen variabel. Auch die Navigation ist in beiden Dimensionen variabel, aber wir werden eine Mindestbreite von 200 Pixel festlegen. Warum? Natürlich, um die Funktionen von CSS Grid vorzustellen.)
Im CSS-Raster werden die Spalten und Zeilen als Tracks bezeichnet. Beginnen wir mit der Definition unserer ersten Tracks, den Zeilen:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows verwendet eine Folge von Größen, durch die die einzelnen Zeilen definiert werden.
In diesem Fall weisen wir der ersten Zeile eine Höhe von 150 px und der letzten Zeile eine Höhe von 100 px zu.
Die mittlere Zeile ist auf auto gesetzt. Das bedeutet, dass sie an die erforderliche Höhe angepasst wird, um die Rasterelemente (die untergeordneten Elemente des Rastercontainers) in dieser Zeile unterzubringen. Da sich der Textkörper über den gesamten Darstellungsbereich erstreckt, füllt der Track mit dem Inhalt (im Bild oben gelb) zumindest den gesamten verfügbaren Platz aus, wird aber bei Bedarf größer (und das Dokument wird gescrollt).
Bei den Spalten möchten wir einen dynamischeren Ansatz wählen: Wir möchten, dass sowohl der Navigationsbereich als auch der Inhalt größer und kleiner werden. Der Navigationsbereich soll jedoch niemals unter 200 Pixel verkleinert werden und der Inhalt soll größer sein als der Navigationsbereich. 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 annimmt: die Mindest- und die maximale Größe des Titels.
Das entspricht in etwa min-width und max-width. Die Mindestbreite beträgt, wie bereits
erwähnt, 200 Pixel. Die maximale Breite beträgt 3fr. fr ist eine rasterspezifische Einheit, mit der Sie den verfügbaren Platz auf die Rasterelemente verteilen können. fr steht wahrscheinlich für „fraction unit“, kann aber auch für kostenlose Einheit stehen.
Unsere Werte bedeuten, dass beide Spalten den Bildschirm ausfüllen, aber die Inhaltsspalte ist immer dreimal so breit wie die Navigationsspalte (vorausgesetzt, die Navigationsspalte bleibt breiter als 200 Pixel).
Obwohl die Platzierung unserer Rasterelemente noch nicht korrekt ist, funktioniert die Größe der Zeilen und Spalten korrekt und führt zum gewünschten Verhalten:
Elemente platzieren
Eine der leistungsstärksten Funktionen von Grid ist die Möglichkeit, Elemente unabhängig von der DOM-Reihenfolge zu platzieren. Da Screenreader das DOM verwenden, sollten Sie jedoch unbedingt darauf achten, wie Sie Elemente neu anordnen, um einen ordnungsgemäßen Zugriff zu ermöglichen. Wenn keine manuelle Platzierung erfolgt, werden die Elemente im Raster in DOM-Reihenfolge von links nach rechts und von oben nach unten angeordnet. Jedes Element belegt eine Zelle. Die Reihenfolge, in der das Raster ausgefüllt wird, kann mit grid-auto-flow geändert werden.
Wie platzieren wir also Elemente? Am einfachsten platzieren Sie Rasterelemente, indem Sie festlegen, welche Spalten und Zeilen sie abdecken. Grid bietet hierfür zwei Syntaxen: Mit der ersten Syntax definieren Sie Start- und Endpunkte. Im zweiten Beispiel definieren Sie einen Startpunkt und eine Spanne:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Die Überschrift soll in der ersten Spalte beginnen und vor der dritten Spalte enden. Unsere Navigation sollte in der zweiten Zeile beginnen und sich insgesamt über zwei Zeilen erstrecken.
Die Implementierung des Layouts ist jetzt abgeschlossen. Ich möchte Ihnen aber ein paar praktische Funktionen zeigen, die Ihnen das Raster zur Verfügung stellt, um die Platzierung zu erleichtern. Die erste Funktion besteht darin, dass Sie die Grenzen der Tracks benennen und für die Platzierung verwenden können:
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 obige Code liefert dasselbe Layout wie der vorherige Code.
Noch leistungsstärker ist die Funktion, ganze Regionen in Ihrem 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;
}
grid-template-areas verwendet einen String mit durch Leerzeichen getrennten Namen, damit der Entwickler jeder Zelle einen Namen geben kann. Haben zwei benachbarte Zellen denselben Namen,
werden sie zum selben Bereich zusammengeführt. Auf diese Weise können Sie mehr Semantik für Ihren Layoutcode bereitstellen und Medienabfragen intuitiver gestalten. Dieser Code generiert wieder das gleiche Layout wie zuvor.
Gibt es noch mehr?
Ja, es gibt viel zu viel, um in einem einzigen Blogpost zu behandeln. Rachel Andrew, die auch GDE ist, ist eingeladene Experte in der Preisvergleichsportal-Arbeitsgruppe und hat von Anfang an mit ihnen zusammen an der Vereinfachung des Webdesigns gearbeitet. Sie hat sogar ein Buch darauf geschrieben. Ihre Website Grid By Example ist eine wertvolle Ressource, um sich mit Grid vertraut zu machen. Viele Leute denken, dass Grid ein revolutionärer Schritt für das Webdesign ist und jetzt standardmäßig in Chrome aktiviert ist, sodass Sie es sofort nutzen können.