Kurzfassung
Wenn Sie mit Flexbox vertraut sind, sollte Ihnen Grid vertraut vorkommen. Rachel Andrew betreibt eine großartige Website zum CSS Grid, um Ihnen den Einstieg zu erleichtern. 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, Layouts von oben nach unten oder den heiligen Gral der CSS-Zauberei: die vertikale Zentrierung.
Leider haben Bildschirme häufig 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 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 sollten Sie Flexbox und Grid nicht als konkurrierende Layouttechniken betrachten. Das Raster ist in zwei Dimensionen angeordnet, die Flexbox in einer. 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 unserem 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 Sie die Zeilen und Spalten des 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 jedoch nie unter 200 px sinken und die Inhalte 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 maximale Größe des Titels.
(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 von links nach rechts und von oben nach unten angeordnet. 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 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 nimmt einen String mit durch Leerzeichen getrennten Namen an, sodass der Entwickler jeder Zelle einen Namen geben kann. Wenn zwei benachbarte Zellen denselben Namen haben, werden sie zu einem einzigen 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 etwas?
Ja, ja, es gibt viel zu viel, um es 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 darüber geschrieben. Ihre Website Grid By Example ist eine wertvolle Ressource, um sich mit dem Raster vertraut zu machen. Viele Menschen 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.