grid-template-areas

Die CSS-Eigenschaft grid-template-areas ermöglicht es Ihnen, die Zellen (oder „Bereiche“) in einem CSS-Grid-Container zu definieren und zu benennen.

.grid-container {
  display: grid;
  grid-template-areas: "header header" "sidebar main";
}

Also, das obige Beispiel? Wir erhalten ein Zwei-mal-Zwei-Grid, bei dem die obere Zeile zwei Spalten für einen Bereich namens header reserviert. Die untere Zeile erhält ebenfalls zwei Spalten, reserviert sie jedoch für die Grid-Bereiche namens sidebar bzw. main.

Das bedeutet, dass unser Grid eingerichtet ist und wir Grid-Bereiche definiert haben, aber diesen Grid-Bereichen ist noch nichts zugewiesen. Wenn wir ein Element in einem Grid-Bereich platzieren wollen, müssen wir es explizit mit der Eigenschaft grid-area auf diesem Element deklarieren.

.grid-container {
  display: grid;
  grid-template-areas: "header header" "sidebar main";
}
.grid-header {
  grid-area: header;
}
.grid-sidebar {
  grid-area: sidebar;
}
.grid-content {
  grid-area: main;
}

Wichtig ist, dass ein Grid-Bereich entweder eine einzelne Zelle im Grid-Container oder eine Gruppe von angrenzenden Zellen in **rechteckiger Form** sein muss. Das bedeutet, dass alle folgenden Beispiele gültig sind.

Was wir jedoch nicht tun können, ist, nicht-rechteckige Grid-Bereiche zu bilden. Also, kein Glück, wenn der zu definierende Bereich eher die Form eines "T" oder eines "L" hat.

Syntax

grid-template-areas: none | <string>

• Initialwert: none
• Gilt für: Grid-Container
• Vererbt: nein
• Berechneter Wert: Wie angegeben, das Schlüsselwort none oder eine Liste von Zeichenkettenwerten
• Animationstyp: diskret

Werte

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "col-1 col-2 col-3";
grid-template-areas: "header header header" "sidebar main main";
grid-template-areas: "header header header"
                      "sidebar main main"
                      ". footer footer";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: unset;

none

Dies ist der **Standardwert**. Und wie Sie vielleicht schon erraten haben, bedeutet none, dass keine benannten Grid-Bereiche und keine expliziten Grid-Spuren auf dem Grid-Container gesetzt sind. Das bedeutet auch, dass die Grid-Spuren implizit generiert werden und ihre Größen durch die Eigenschaften grid-auto-columns und grid-auto-rows definiert werden.

Es gibt tatsächlich eine weitere Möglichkeit, explizite Grid-Spuren zu erstellen, als grid-template-areas zu verwenden, und das ist die Verwendung der Eigenschaften grid-template-columns und grid-template-rows stattdessen. Das werden wir später im Artikel ausführlicher behandeln.

<string>

Eine Zeichenkette kann jeder Name sein, den Sie einem bestimmten Grid-Template-Bereich geben möchten. Wenn Sie also eine obere Zeile in Ihrem Grid-Container haben und der Header Ihres Layouts dort platziert werden soll, können Sie den Bereich „header“ oder „page-top“ oder buchstäblich was auch immer Sie wollen nennen. Tatsächlich, wenn es mehrere Spalten in dieser Zeile gibt, können wir jede einzeln unterschiedlich benennen.

.grid {
  grid-template-areas: "logo menu utility-nav";
}

Beachten Sie, dass die gesamte dreispaltige Zeile in diesem Beispiel in Anführungszeichen gesetzt ist. Das ist entscheidend, denn das Benennen von Grid-Template-Bereichen in Anführungszeichen bedeutet eine neue Zeile. Wenn wir also zwei Zeilen haben, sehen wir zwei Gruppen von Anführungszeichen.

.grid {
  grid-template-areas: "logo menu utility-nav" "sidebar-1 content sidebar-2";
}

Noch besser, wir können dies etwas einfacher verständlich machen, indem wir jede Zeile auf ihre eigene Zeile schreiben.

.grid {
  grid-template-areas:
    "logo menu utility-nav"
    "sidebar-1 content sidebar-2";
}

Die Syntax für Zeichenketten kann Dinge wie das Überspringen und Auslassen von Zellen im Grid-Container. Darauf kommen wir gleich noch.

Grundlegende Verwendung

Zuerst definieren wir die Grid-Template-Bereiche, indem wir die Eigenschaft grid-template-areas auf dem übergeordneten Grid-Container verwenden.

.grid {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

So wie es derzeit steht, hat der Grid-Container benannte Bereiche, aber nichts darin. Um Elemente dort zu platzieren, müssen wir den benannten Grid-Bereich einem Element zuweisen, indem wir die Eigenschaft grid-area auf dem zu platzierenden Element verwenden.

header {
  grid-area: header;
}

aside {
  grid-area: sidebar;
}

main {
  grid-area: main;
}

footer {
 grid-area: footer;
}

Dies ist das Ergebnis, basierend auf den grid-template-areas, die wir auf dem übergeordneten Grid-Container definiert haben.

Größenbestimmung der benannten Bereiche eines Grids

Die Größe der Grid-Spuren kann mit den Eigenschaften grid-template-columns und grid-template-rows auf dem übergeordneten Grid-Container festgelegt werden.

Sagen wir, wir haben die Anforderung, dass unser Grid zwei Spalten benötigt und die zweite Spalte doppelt so viel Platz einnimmt wie die erste. Dafür können wir die fraktionale (fr) Einheit verwenden.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "sidebar main";
}

Für Zeilen gilt das gleiche Prinzip. Nehmen wir nun an, wir benötigen das folgende Layout in einem Drei-mal-Drei-Grid.

Machen wir dieses Mal die erste und dritte Zeile mit einer festen Höhe von 250px, aber dimensionieren wir die mittlere Zeile so, dass sie so viel Platz wie der Inhalt benötigt.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-rows: 250px auto 250px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

Wenn Sie sich fragen, was es mit all diesen wiederholten benannten Grid-Template-Bereichen auf sich hat, das hat alles mit...

Zellen und Zeilen überspannen

Das Wiederholen eines benannten Bereichs verbindet Zellen. Wenn das Ziel also ist, einen benannten Bereich namens feature zu erstellen und dieser zwei Spalten in der oberen Zeile einnehmen soll, können wir etwas wie das hier tun.

/* Valid declaration */
grid-template-areas: "feature feature widget";

Cool, und wir können dasselbe in vertikaler Richtung tun, wenn derselbe benannte Bereich jede Zeile beginnt.

/* Valid declaration */
grid-template-areas:
  "feature aside widget-1"
  "feature aside widget-2";

Natürlich können wir die beiden kombinieren, um einen Grid-Template-Bereich zu erhalten, der beide Richtungen überspannt.

/* Valid declaration */
grid-template-areas:
  "feature feature widget-1"
  "feature feature widget-2";

Wie bereits erwähnt, müssen Grid-Template-Bereiche rechteckig sein. Das bedeutet, dass die folgende Variante des letzten Beispiels ungültig ist.

/* Invalid declaration */
grid-template-areas:
  "feature feature widget-1"
  "feature aside widget-2";

Wir können Lücken (oder harte „Stopps“) zwischen Zellen erzeugen

Das ist möglich durch die Verwendung eines Punktes (.) Notation.

grid-template-areas:
  "header header header"
  "sidebar main main"
  ". footer footer"; /* first cell is empty */
}

Die Anzahl der Punkte ist unerheblich. Wir hätten auch Folgendes tun können.

grid-template-areas:
  "header  header header"
  "sidebar main   main"
  "....... footer footer"; /* first cell is empty */
}

Beide Deklarationen erstellen das gleiche Grid.

Leerzeichen sind eine gute Möglichkeit, das Grid zu visualisieren

Die folgenden Deklarationen sind äquivalent, aber die zweite ist einfacher zu visualisieren, da wir leere Leerzeichen verwenden, um die Namen auszurichten.

grid-template-areas:
  "header header header"
  "sidebar main main"
  ". footer footer";

grid-template-areas:
  "header  header header"
  "sidebar main   main"
  ".       footer footer";

Wenn Sie nach einer weiteren Möglichkeit suchen, einen Grid-Container zu visualisieren, hat Chris eine clevere Idee, ihn in einer Art ASCII-Format zu „zeichnen“, um das Grid in einer Art ASCII-Format in Ihren CSS-Kommentaren zu visualisieren.

Zeilen müssen die gleiche Anzahl von Spalten haben

Alle Listen müssen die gleiche Anzahl von Werten haben, andernfalls ist die Deklaration ungültig.

/* 👍 */
grid-template-areas:
  "name name-2 name-3"
  "name name-2 name-3"
  "name name-2 name-3";

/* 👍 */
grid-template-areas:
  "header header"
  ". main"
  "footer footer";

/* 👎 */
grid-template-areas:
  "name name-2 name-3"
  "name name-2 name-3"
  "name name-3";

Verwendung von Unicode-Zeichen für benannte Grid-Bereiche

Laut Spezifikation müssen alle Namen, die nicht der <ident>-Syntax entsprechen, bei der Referenzierung dieses Bereichs in anderen Eigenschaften maskiert werden. Im folgenden Beispiel beginnt der Name des ersten Bereichs beispielsweise mit einer Zahl und entspricht daher nicht der <ident>-Syntax.

.grid {
  grid-template-areas: "1st b c";
}

Die Umgehung besteht darin, den unmaskierten Hexadezimalcode für die Ziffer 1 zu deklarieren. In diesem Fall ist der Hex-Code U+0031, den wir in CSS als \31st maskieren. Das ist also das, was wir verwenden, um ein Element diesem benannten Grid-Bereich zuzuweisen.

.grid-item {
  grid-area: \31st;
}

Implizit zugewiesene Zeilennamen

Das Definieren von Spuren mit der Eigenschaft grid-template-areas liefert uns kostenlose Zeilennamen basierend auf den zugewiesenen Namen. Das unterscheidet sich von den Eigenschaften grid-template-rows und grid-template-columns, bei denen wir Zeilennamen angeben müssen, wenn wir Spalten und Zeilen definieren. Bei der Eigenschaft grid-template-areas ist das nicht der Fall, da sie die von uns bereitgestellten Namen verwendet und uns Spurnamen ausgibt.

Für jeden benannten Grid-Template-Bereich werden vier Grid-Linien erstellt. Wenn wir einen Grid-Template-Bereich namens sidebar haben, erhalten wir zwei Paare von Spurlinien namens sidebar-start und sidebar-end – ein Paar für die Spaltenrichtung und ein Paar für die Zeilenrichtung.

Sie fragen sich vielleicht, was passiert, wenn wir explizit Spurnamen definieren und denselben Namen verwenden, den wir erhalten würden, wenn sie implizit definiert wären – z. B. eine Grid-Linie namens sidebar-start für einen benannten Bereich sidebar explizit zu definieren. Die beiden Linien können koexistieren und verschiedenen Elementen zugewiesen werden. Mit anderen Worten, der explizite Wert ist immer noch gültig und beide Linien können verwendet werden.

Implizit benannte Bereiche

Eine weitere Möglichkeit, Grid-Bereiche in einem Grid-Container zu benennen, ist, CSS Grid sie implizit für uns benennen zu lassen, wenn wir Spurnamen auf den Eigenschaften grid-template-columns und grid-template-rows festlegen.

Alles, was wir tun müssen, ist, einen Namen für den Grid-Bereich zu wählen und -start und -end daran anzuhängen, um die Spurnamen zu bilden. Hier erhalten wir beispielsweise einen Grid-Template-Bereich namens sidebar, ohne die Eigenschaft grid-template-areas deklarieren zu müssen.

.grid-container {
  display: grid;
  grid-template-columns: [sidebar-start] 250px [sidebar-end] 1fr;
}

aside {
  grid-area: sidebar;
}

Wie Sie im obigen Beispiel sehen, obwohl keine Eigenschaft grid-template-areas vorhanden ist, um einen Bereich namens „sidebar“ explizit zu definieren, kann dieser Bereich dennoch von den Grid-Platzierungseigenschaften wie grid-area, grid-row, grid-column oder ihren Langformen referenziert werden.

Beispiel: Responsives Holy Grail Layout

Im folgenden Demo verwenden wir die Eigenschaft grid-template-areas, um das berüchtigte Holy Grail Layout mit CSS Grid zu erstellen.

Dieses Layout erhielt seinen Namen aufgrund der Tatsache, dass es zu Zeiten von Layouts mit Floats unglaublich schwierig zu realisieren war. Gott sei Dank haben wir CSS Grid, um es fast trivial zu machen.

Zuerst unser HTML.

<div class="grid">
  <header>Header</header>
  <main>Main Content</main>
  <aside class="left-sidebar">Left Sidebar</aside>
  <aside class="right-sidebar">Right Sidebar</aside>
  <footer>Footer</footer>  
</div>

Ziemlich einfach bisher, oder? Wir wollen den Header oben, den Footer unten und den Hauptinhalt als eine von drei Spalten in der mittleren Zeile.

Wir können die benannten Grid-Template-Bereiche in CSS einrichten und Zeilen überspannen, wo nötig.

.container {
  grid-template-columns: 12rem auto 12rem;
  grid-template-areas:
    "header header header"
    "left-sidebar main right-sidebar"
    "footer footer footer";    
}

Nun müssen wir jedes Element einem benannten Grid-Bereich zuweisen.

header {
  grid-area: header;
}
main {
  grid-area: main;
}
footer {
  grid-area: footer;
}
.left-sidebar {
  grid-area: left-sidebar;
}
.right-sidebar {
  grid-area: right-sidebar;
}

Ähm, wir sind technisch fertig! Das ist wirklich alles, was es braucht. Wir können dies noch einen Schritt weiter bringen, indem wir die Grid-Bereiche standardmäßig vertikal stapeln und dann das Holy Grail auf größeren Bildschirmen aufbauen, wo es viel besser aussieht.

.container {
  display: grid;
  grid-template-areas:
    /* Each area is a row */
    "header"
    "nav"
    "article"                       
    "sidebar"                           
    "footer";
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: 12rem auto 12rem;
    grid-template-areas:
      /* Build the Holy Grail layout */
      "header header header"
      "nav article article"
      "sidebar article article"
      "footer footer footer";
  }
}

Browser-Unterstützung

Weitere Informationen

• CSS Grid Layout Module Level 2
• Einfache benannte Grid-Bereiche (Chris Coyier)
• Der Unterschied zwischen expliziten und impliziten Grids (Manuel Matuzovic)
• Dinge, die ich über CSS Grid Layout gelernt habe (Oliver Williams)

Mehr Tricks!

Verwandte Eigenschaften