Kurzfassung
Wenn Sie mit Flexbox vertraut sind, sollte Ihnen Grid vertraut vorkommen. Rachel Andrew betreibt eine hervorragende Website zu CSS Grid, die Ihnen den Einstieg erleichtern wird. Das Raster ist jetzt in Google Chrome verfügbar.
Flexbox? Raster?
In den letzten Jahren hat sich CSS Flexbox weit verbreitet und die Browserunterstützung sieht sehr gut aus (es sei denn, Sie sind einer der armen Seelen, die IE 9 und niedriger unterstützen müssen). Flexbox hat viele komplexe Layoutaufgaben vereinfacht, z. B. den gleichmäßigen Abstand zwischen Elementen, von oben nach unten angeordnete Layouts oder den Heiligen Gral der CSS-Zauberei: die vertikale Zentrierung.
Leider haben Bildschirme in der Regel eine zweite Dimension, um die wir uns kümmern müssen. Wenn Sie die Größe der Elemente nicht selbst festlegen, können Sie mit Flexbox leider weder einen vertikalen noch einen horizontalen Rhythmus erzielen. Hier kommt CSS Grid ins Spiel.
CSS Grid befindet sich seit über fünf Jahren in der Entwicklung und ist in den meisten Browsern hinter einer Flagge versteckt. Außerdem wurde mehr Zeit für die Interoperabilität aufgewendet, um einen fehlerhaften Start wie bei Flexbox zu vermeiden. Wenn Sie also Grid verwenden, um Ihr Layout in Chrome zu implementieren, erhalten Sie in Firefox und Safari wahrscheinlich dasselbe Ergebnis. Zum Zeitpunkt der Erstellung dieses Artikels ist die Edge-Implementierung von Grid von Microsoft veraltet (dieselbe, die bereits in IE11 vorhanden war) und das Update ist in Prüfung.
Trotz der Ähnlichkeiten in Konzept und Syntax sollten Sie Flexbox und Grid nicht als konkurrierende Layouttechniken betrachten. Raster werden in zwei Dimensionen angeordnet, während Flexbox in einer Dimension angeordnet wird. Die Kombination der beiden Tools bietet Synergien.
Raster definieren
Um sich mit den einzelnen Eigenschaften von Grid vertraut zu machen, empfehle ich Ihnen Grid By Example von Rachel Andrew oder die Cheat Sheet von CSS Tricks. Wenn Sie mit Flexbox vertraut sind, sollten Ihnen viele der Eigenschaften und ihre Bedeutung bereits bekannt sein.
Sehen wir uns ein Standard-Rasterlayout mit 12 Spalten an. Das klassische Layout mit zwölf Spalten ist beliebt, da die Zahl 12 durch 2, 3, 4 und 6 teilbar ist und daher für viele Designs geeignet ist. Implementieren wir dieses Layout:
Beginnen wir mit dem Markup-Code:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
In unserem Stylesheet beginnen wir damit, body
so zu erweitern, dass es den gesamten Viewport abdeckt, und machen es zu einem Rastercontainer:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Jetzt verwenden wir CSS Grid. Super!
Im nächsten Schritt implementieren wir die Zeilen und Spalten unseres Rasters. Wir könnten alle 12 Spalten in unserem Mockup implementieren, aber da wir nicht alle Spalten verwenden, würde dies unser CSS unnötig unübersichtlich machen. Der Einfachheit halber implementieren wir das Layout so:
Kopf- und Fußzeile sind variabel in der Breite und der Inhalt ist variabel in beiden Dimensionen. Die Navigationsleiste ist ebenfalls in beiden Dimensionen variabel, aber wir legen eine Mindestbreite von 200 Pixeln fest. Warum? Natürlich, um die Funktionen von CSS Grid zu präsentieren.)
In CSS-Rastern werden die Spalten und Zeilen als Tracks bezeichnet. Beginnen wir mit der Definition der ersten Tracks, der Zeilen:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows
nimmt eine Sequenz von Größen an, die die einzelnen Zeilen definieren.
In diesem Fall geben wir der ersten Zeile eine Höhe von 150 px und der letzten 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 unser Body über den gesamten Viewport verteilt ist, füllt der Track mit den Inhalten (gelb im Bild oben) mindestens den gesamten verfügbaren Bereich aus. Er wird aber bei Bedarf wachsen (und das Dokument scrollen lassen).
Bei den Spalten möchten wir einen dynamischeren Ansatz verfolgen: Sowohl die Navigationsleiste als auch die Inhalte sollen sich vergrößern und verkleinern, die Navigationsleiste darf jedoch nie unter 200 px sinken und die Inhalte sollen größer sein als die Navigationsleiste. 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 Maximalgröße dieses Tracks.
(Das 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 gitterspezifische Einheit, mit der Sie den verfügbaren Platz auf die gitterspezifischen Elemente verteilen können. fr steht wahrscheinlich für „fraction unit“ (Fraktionseinheit), könnte aber auch bald „free unit“ (kostenlose Einheit) bedeuten.
Bei diesen Werten werden beide Spalten so weit maximiert, dass sie den Bildschirm füllen. Die Inhaltsspalte ist jedoch immer dreimal so breit wie die Navigationsspalte, sofern diese breiter als 200 Pixel bleibt.
Die Platzierung der Rasterelemente ist noch nicht korrekt, die Größe der Zeilen und Spalten ist jedoch 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 durchsuchen, sollten Sie jedoch darauf achten, wie Sie Elemente neu anordnen, um die Barrierefreiheit zu verbessern. Wenn keine manuelle Platzierung erfolgt, werden die Elemente im Raster in DOM-Reihenfolge angeordnet, also 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 also Elemente? Am einfachsten platzieren Sie Rasterelemente, indem Sie festlegen, welche Spalten und Zeilen sie abdecken. Grid bietet zwei Syntaxen für diesen Zweck: Im ersten Fall definieren Sie Start- und Endpunkte. Im zweiten Fall definieren Sie einen Startpunkt und einen Bereich:
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. Die Navigationsleiste sollte in der zweiten Zeile beginnen und insgesamt zwei Zeilen umfassen.
Technisch gesehen sind wir mit der Implementierung unseres Layouts fertig, aber ich möchte Ihnen einige praktische Funktionen von Grid zeigen, die das Platzieren erleichtern. Die erste Funktion ist, dass du deine Titelränder benennen und diese Namen für das Platzieren verwenden kannst:
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 selben Layout wie der Code davor.
Noch praktischer 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
nimmt einen String mit durch Leerzeichen getrennten Namen entgegen, sodass der Entwickler jeder Zelle einen Namen geben kann. Wenn zwei benachbarte Zellen denselben Namen haben, werden sie zu einem einzigen Bereich zusammengeführt. So können Sie Ihrem Layoutcode mehr Semantik hinzufügen und Mediaabfragen intuitiver gestalten. Auch mit diesem Code wird das gleiche Layout wie zuvor generiert.
Gibt es noch etwas?
Ja, ja, es gibt viel zu viel, um es in einem einzigen Blogpost zu behandeln. Rachel Andrew, die auch GDE ist, ist eine eingeladene Expertin in der CSS-Arbeitsgruppe 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 dem Raster vertraut zu machen. Viele Menschen halten das Raster für einen revolutionären Schritt im Webdesign. Es ist jetzt standardmäßig in Chrome aktiviert, sodass Sie es sofort verwenden können.