CSS grid-template-areas Eigenschaft
Erfahren Sie, wie Sie mit CSS grid-template-areas Rasterbereiche benennen, Seitenlayouts visuell gestalten und mit Media Queries neu anordnen.
Die Eigenschaft grid-template-areas ermöglicht es Ihnen, ein CSS Grid visuell zu gestalten, indem Sie das Layout mit Namen statt mit Zahlen zeichnen. Sie wird auf einen Grid-Container angewendet und erhält pro Grid-Zeile eine in Anführungszeichen gesetzte Zeichenkette. Innerhalb jeder Zeichenkette geben Sie für jede Spaltenzelle einen Namen an, und Zellen mit demselben Namen verschmelzen zu einem einzigen rechteckigen benannten Bereich.
Jedes Grid-Element wird dann platziert, indem es mit der Eigenschaft grid-area auf einen dieser Namen verweist — zum Beispiel platziert grid-area: header; das Element dort, wo Sie im Template header geschrieben haben. Da die Zeichenketten untereinander wie ein ASCII-Bild ausgerichtet sind, sieht der Quellcode dem erzeugten Seitenlayout ähnlich, was komplexe Layouts deutlich leichter lesbar und umstrukturierbar macht, als grid-row-start, grid-column-start und deren Kurzschreibweisen manuell festzulegen.
Eigenschaftsreferenz
| Anfangswert | none |
| Gilt für | Grid-Container |
| Vererbbar | Nein |
| Animierbar | Nein |
| Version | CSS Grid Layout Module Level 1 |
Syntax
grid-template-areas: none | <string>+;none ist der Standardwert und bedeutet, dass keine benannten Bereiche definiert sind. Andernfalls besteht der Wert aus einer oder mehreren Zeichenketten in Anführungszeichen — eine pro Zeile.
So lesen Sie die Zeichenketten
Einige Regeln machen die Syntax verständlich:
- Eine Zeichenkette = eine Zeile. Drei Zeichenketten in Anführungszeichen erzeugen drei Zeilen; die Anzahl der Token-Namen in jeder Zeichenkette bestimmt die Anzahl der Spalten.
- Jede Zeichenkette muss dieselbe Anzahl an Token enthalten, sonst behandelt der Browser die gesamte Deklaration als ungültig und ignoriert sie.
- Ein wiederholter Name überspannt Zellen. Wird derselbe Name in zwei oder mehr benachbarten Zellen angegeben — horizontal, vertikal oder als Rechteck — werden diese zu einem Bereich zusammengeführt. Die Form muss rechteckig sein; eine L-Form ist ungültig.
- Ein Punkt (
.) markiert eine leere Zelle, die keinem benannten Bereich angehört. Mehrere aufeinanderfolgende Punkte (z. B....) zählen als einzelne leere Zelle und sind eine verbreitete Konvention für bessere Lesbarkeit. - Ein Bereich zu benennen ändert nicht die Größe seiner Tracks. Verwenden Sie grid-template-columns und grid-template-rows — oder die Kurzschreibweise grid-template — um die Abmessungen zu steuern.
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"menu main right"
"footer footer footer";
}Hier überspannen header und footer je alle drei Spalten, während menu, main und right nebeneinander in der mittleren Zeile sitzen.
Werte
| Wert | Beschreibung |
|---|---|
none | Es sind keine benannten Grid-Bereiche definiert. Grid-Elemente werden auf andere Weise platziert (Zeilennummern, span oder automatische Platzierung). |
<string>+ | Eine oder mehrere Zeichenketten in Anführungszeichen, die das Template zeichnen. Jede Zeichenkette repräsentiert eine Zeile; jedes durch Leerzeichen getrennte Token in einer Zeichenkette repräsentiert eine Zelle. Wiederholte Token bilden rechteckige benannte Bereiche; ein .-Token ist eine unbenannte (leere) Zelle. |
Grundlegendes Layout-Beispiel
Das klassische Seiten-Shell-Layout — Kopfzeile, Seitenleiste, Inhalt und Fußzeile — ist die einfachste Demonstration, warum benannte Bereiche existieren.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 { grid-area: header; }
.box2 { grid-area: menu; }
.box3 { grid-area: main; }
.box4 { grid-area: right; }
.box5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
"header header header header header header"
"menu main main main right right"
"menu footer footer footer footer footer";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box1">Header</div>
<div class="box2">Menu</div>
<div class="box3">Main</div>
<div class="box4">Right</div>
<div class="box5">Footer</div>
</div>
</body>
</html>Ergebnis
Leere Zellen mit Punkten
Ein Punkt-Token weist ein Element keinem benannten Bereich zu und lässt diese Zelle unbelegt. Im folgenden Beispiel überspannt item1 die ersten zwei Spalten eines fünfspaltigen Grids; die verbleibenden drei Zellen in dieser einen Zeile sind leer.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box { grid-area: item1; }
.grid-container {
display: grid;
grid-template-areas: "item1 item1 . . .";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Responsive Layouts mit Media Queries
grid-template-areas lässt sich hervorragend mit Media Queries kombinieren: Schreiben Sie einfach die Zeichenketten innerhalb des Breakpoint-Blocks neu, und das Layout wird ohne Markup-Änderungen und ohne Neunummerierung von Grid-Linien neu gezeichnet.
/* Mobile: single-column stack */
.page {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"menu"
"main"
"footer";
}
/* Desktop: sidebar left, content right */
@media (min-width: 700px) {
.page {
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"menu main"
"footer footer";
}
}Jedes Grid-Element behält seinen grid-area-Namen; nur das Template ändert sich. Dies ist der Hauptgrund, warum benannte Bereiche bei responsiven Designs gegenüber der numerischen Linienplatzierung bevorzugt werden.
Häufige Fallstricke
Bereiche müssen rechteckig sein
Wenn derselbe Name in einer L-Form, einer Diagonale oder einem anderen nicht-rechteckigen Muster über Zellen auftaucht, behandelt der Browser die gesamte grid-template-areas-Deklaration als ungültig und fällt auf none zurück. Jeder benannte Bereich muss ein zusammenhängendes Rechteck bilden.
/* INVALID — "content" forms an L-shape */
.bad {
grid-template-areas:
"header header"
"content sidebar"
"content content"; /* content is now L-shaped → invalid */
}
/* VALID — "content" is rectangular */
.good {
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
}Alle Zeilen müssen dieselbe Spaltenanzahl haben
Jede Zeichenkette in Anführungszeichen muss die gleiche Anzahl an durch Leerzeichen getrennten Token enthalten. Füllen Sie kürzere Zeilen mit Punkt-Token auf, damit die Spalten ausgerichtet sind:
/* INVALID — row 2 has only 2 tokens, row 1 has 3 */
.bad {
grid-template-areas:
"a a b"
"c c";
}
/* VALID — three tokens in every row */
.good {
grid-template-areas:
"a a b"
"c c .";
}Einen Bereich zu benennen ändert nicht die Größe seiner Tracks
Benannte Bereiche teilen dem Browser mit, welche Zellen zusammengehören, nicht wie groß diese Zellen sind. Kombinieren Sie grid-template-areas stets mit grid-template-columns und grid-template-rows:
.container {
display: grid;
grid-template-columns: 180px 1fr; /* sidebar fixed, content fluid */
grid-template-rows: 60px 1fr 40px; /* header, body, footer heights */
grid-template-areas:
"header header"
"nav content"
"nav footer";
}Nicht zugeordnete Grid-Elemente werden automatisch platziert
Wenn der grid-area-Name eines Kindelements mit keinem Bereich im Template übereinstimmt, platziert der Browser es automatisch mithilfe des grid-auto-flow-Algorithmus — es landet in der nächsten verfügbaren impliziten Zelle, anstatt zu verschwinden.
Die Kurzschreibweise grid-template
Die Eigenschaft grid-template kombiniert grid-template-rows, grid-template-columns und grid-template-areas in einer einzigen Deklaration:
.container {
display: grid;
grid-template:
"header header" 60px
"nav content" 1fr
"footer footer" 40px
/ 180px 1fr;
}Die Zeilengröße folgt jeder Zeichenkette in derselben Zeile; Spaltengrößen kommen nach dem abschließenden /. Das Ergebnis ist identisch mit dem separaten Schreiben der drei Eigenschaften.