Kurzfassung
Wenn Sie mit Flexbox vertraut sind, sollte Ihnen Grid vertraut vorkommen. Rachel Andrew bietet eine hervorragende Website zum CSS Grid, um Ihnen den Einstieg zu erleichtern. Grid ist jetzt in Google Chrome verfügbar.
Flexbox? Raster?
In den letzten Jahren ist CSS Flexbox weit verbreitet und die Browserunterstützung sieht wirklich gut aus – es sei denn, Sie sind einer der armen Seele, die IE9 und niedriger unterstützen müssen. Flexbox erleichterte viele komplexe Layoutaufgaben, wie z. B. gleichmäßige Abstände zwischen Elementen, Layouts von oben nach unten oder den heiligen Gral des CSS-Assistenten: die vertikale Zentrierung.
Doch leider haben Bildschirme in der Regel eine zweite Dimension, über die wir uns Gedanken machen müssen. Leider musst du dich nicht selbst um die Größenanpassung der Elemente kümmern. Leider reicht die Flexbox nicht aus, sowohl einen vertikalen als auch einen horizontalen Rhythmus. Hier kommt CSS Grid zur Hilfe.
CSS Grid befindet sich in der Entwicklung und hinter einer Markierung in den meisten Browsern seit über 5 Jahren. Außerdem wird zusätzliche Zeit für die Interoperabilität aufgewendet, um eine groß angelegte Einführung wie Flexbox zu vermeiden. Wenn Sie also das Raster verwenden, um Ihr Layout in Chrome zu implementieren, erhalten Sie wahrscheinlich in Firefox und Safari dasselbe Ergebnis. Zum Zeitpunkt der Erstellung dieses Dokuments ist die Microsoft Edge-Implementierung von Grid veraltet (wie bereits in IE11 vorhanden.) und das Update ist "wird geprüft".
Trotz der Ähnlichkeiten in Konzept und Syntax sollten Sie Flexbox und Grid nicht als konkurrierende Layouttechniken betrachten. Das Raster wird in zwei Dimensionen angeordnet, während die Flexbox in einer Dimension dargestellt wird. Wenn beide zusammen verwendet werden, entstehen Synergien.
Raster definieren
Um sich mit den einzelnen Eigenschaften von Grid vertraut zu machen, empfehle ich Rachel Andrews Grid By Example oder die Cheat Sheet der CSS-Tricks. Wenn Sie mit Flexbox vertraut sind, sollten Ihnen viele der Eigenschaften und ihre Bedeutung bekannt sein.
Sehen wir uns ein standardmäßiges 12-spaltiges Rasterlayout 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 nun dieses Layout:
Beginnen wir mit unserem Markup-Code:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
Im Stylesheet beginnen wir mit der Erweiterung von body, sodass sie den gesamten Darstellungsbereich abdeckt, und wandeln sie in einen Rastercontainer um:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Jetzt verwenden wir CSS Grid. Juhu!
Im nächsten Schritt implementieren Sie die Zeilen und Spalten unseres Rasters. Wir könnten alle 12 Spalten in unserem Modell implementieren, aber da wir nicht jede Spalte verwenden, würde dies unseren CSS-Code unnötig unübersichtlich machen. Der Einfachheit halber implementieren wir das Layout folgendermaßen:
Die Breite der Kopf- und Fußzeile ist variabel und der Inhalt ist in beiden Abmessungen variabel. Das Navigationsmenü kann auch in beiden Dimensionen variieren, aber wir legen eine Mindestbreite von 200 Pixeln fest. Warum? Um die Funktionen des CSS-Rasters hervorzuheben.)
Im CSS-Raster wird die Gruppe von Spalten und Zeilen als Tracks bezeichnet. Beginnen wir mit der Definition unserer ersten Gruppe von Tracks, den Zeilen:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
Für grid-template-rows wird eine Abfolge von Größen verwendet, die die einzelnen Zeilen definieren.
In diesem Fall erhält die erste Zeile eine Höhe von 150 Pixel und die letzte Zeile 100 Pixel.
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 unser Text über den gesamten Darstellungsbereich gestreckt wird, füllt der Track mit dem Inhalt (im obigen Bild gelb) mindestens den gesamten verfügbaren Platz aus, wächst jedoch und sorgt dafür, dass das Dokument gescrollt wird, falls dies erforderlich ist.
Für die Spalten möchten wir einen dynamischeren Ansatz verfolgen: Wir möchten, dass sowohl „nav“ als auch „content“ vergrößert (und verkleinert) werden, aber die „nav“ darf niemals unter 200 px schrumpfen. Außerdem soll der Inhalt größer sein als „nav“. In Flexbox würden wir flex-grow und Flex-shrink verwenden, aber in Grid sieht das etwas anders aus:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Wir definieren zwei Spalten. Die erste Spalte wird mithilfe der Funktion minmax() definiert, für die zwei Werte verwendet werden: die Mindest- und die maximale Größe des Tracks.
Das ist min-width und max-width in einem. Die Mindestbreite beträgt, wie bereits besprochen, 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 bald eine kostenlose Einheit bedeuten.
Unsere Werte hier bedeuten, dass beide Spalten den Bildschirm ausfüllen, aber die Inhaltsspalte immer dreimal so breit ist wie die Navigationsspalte (vorausgesetzt, sie bleibt breiter als 200 Pixel).
Die Platzierung unserer Rasterelemente ist zwar noch nicht korrekt, aber die Größe der Zeilen und Spalten verhält sich richtig und entspricht dem von uns angestrebten 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, empfehlen wir für den richtigen Zugriff unbedingt darauf, wie Sie Elemente neu anordnen. Wenn keine manuelle Platzierung erfolgt, werden die Elemente im Raster in der DOM-Reihenfolge platziert, von links nach rechts und von oben nach unten. 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 Elemente? Am einfachsten platzieren Sie Rasterelemente, indem sie festlegen, welche Spalten und Zeilen sie abdecken. „Grid“ bietet zwei Syntaxen: In der ersten definieren Sie Start- und Endpunkte. Im zweiten definieren Sie einen Startpunkt und einen Span:
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. Unsere Navigation sollte in der zweiten Zeile beginnen und sich über insgesamt 2 Zeilen erstrecken.
Die Implementierung des Layouts ist im Prinzip abgeschlossen. Ich möchte Ihnen aber noch ein paar praktische Funktionen zeigen, die Grid für eine einfachere Platzierung bietet. Die erste Funktion besteht darin, dass Sie Ihren Trackgrenzen einen Namen geben und diese Namen 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 führt zum gleichen Layout wie der vorherige Code.
Noch wirkungsvoller 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, sodass der Entwickler jeder Zelle einen Namen geben kann. Wenn zwei benachbarte Zellen denselben Namen haben,
werden sie mit demselben Bereich verbunden. Auf diese Weise können Sie Ihrem Layoutcode mehr Semantik hinzufügen und Medienabfragen intuitiver gestalten. Auch dieser Code generiert
das gleiche Layout wie zuvor.
Gibt es noch mehr?
Ja, das gibt es leider viel zu viel, um in einem einzigen Blogpost behandelt zu werden. Rachel Andrew, GDE, ist eingeladene Expertin in der Arbeitsgruppe des Preisvergleichsportals und arbeitet von Anfang an mit ihnen zusammen, um das Webdesign zu vereinfachen. 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 Leute denken, dass „Grid“ ein revolutionärer Schritt im Webdesign ist und jetzt standardmäßig in Chrome aktiviert ist, sodass Sie es noch heute nutzen können.