Seitenlayout mit Bereichen

Ein Grid eignet sich auch hervorragend für das Layout einer ganzen Seite. Unsere Seite besteht aus vier Teilen: dem Kopfbereich (header), dem Menü (nav), dem Hauptinhalt (main) und dem Fußbereich (footer). Setzen wir das Menü links neben den Inhalt, den Kopfbereich darüber und den Fußbereich darunter, beide über die ganze Breite.

Wir könnten jeden Teil mit den Nummern der Grid-Linien platzieren, aber es geht übersichtlicher: Wir können Teilen des Grids Namen geben und das Layout in CSS zeichnen. Der Wert der Eigenschaft grid-template-areas hat für jede Zeile des Grids eine Zeichenkette (einen Text in Anführungszeichen). In die Zeichenkette schreiben wir für jede Spalte dieser Zeile einen Namen. Benachbarte Zellen mit demselben Namen bilden zusammen einen Bereich.

body {
	display: grid;
	grid-template-columns: 8rem 1fr;
	grid-template-areas:
		"kopf kopf"
		"menue inhalt"
		"fuss fuss";
}

Dieses Grid hat zwei Spalten und drei Zeilen. Der Bereich kopf umfasst beide Spalten der ersten Zeile, menue und inhalt teilen sich die zweite Zeile, und fuss füllt die ganze letzte Zeile. Die Menüspalte ist 8rem breit, und der Inhalt bekommt den Rest. Die Namen der Bereiche denken wir uns selbst aus; sie müssen nicht mit den Namen der Elemente übereinstimmen. Jeder Name ist ein Wort ohne Leerzeichen.

Dann sagen wir mit der Eigenschaft grid-area jedem Element, zu welchem Bereich es gehört. Hier wird der Name ohne Anführungszeichen geschrieben:

nav {
	grid-area: menue;
}

Zwei Dinge sind zu beachten: Alle Zeichenketten müssen gleich viele Namen enthalten, und jeder Bereich muss ein Rechteck sein. Sonst ignoriert der Browser die ganze Deklaration. Eine Zelle, die leer bleiben soll, schreibt man als Punkt (.).