grid-template-areas

grid-template-areas: none | <string>+

Zeichnet das Layout eines Grids mit Namen: Jede Zeichenkette ist eine Reihe, jedes Wort eine Zelle. Die Elemente setzt man dann mit der Eigenschaft grid-area mit demselben Namen in die Bereiche. Das Layout ist direkt im Code sichtbar, und auf dem Handy genügt es, die Karte zu ändern.

Werte

none – Standard: keine benannten Bereiche.
Zeichenketten – z. B. "head head" "menu main": Derselbe Name in mehreren Zellen bildet einen Bereich über sie hinweg.
ein Punkt (. oder mehrere Punkte hintereinander) – eine leere Zelle.

Initialwert: none. Vererbt: nein. Gilt für: Grid-Container.

Beispiele

Ein Seitenlayout, mit einer Bereichskarte gezeichnet:

<div class="page">
  <header>Kopfzeile</header>
  <nav>Menü</nav>
  <main>Inhalt</main>
  <footer>Fußzeile</footer>
</div>

.page {
  display: grid;
  grid-template-columns: 90px 1fr;
  grid-template-areas:
    "head  head"
    "menu  main"
    "foot  foot";
  gap: 6px;
  max-width: 320px;
}
header { grid-area: head; }
nav { grid-area: menu; }
main { grid-area: main; height: 60px; }
footer { grid-area: foot; }
.page > * {
  padding: 6px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}

Ergebnis

Kopfzeile

Inhalt

Auf einem schmalen Bildschirm genügt es, die Karte zu ändern – die Elemente ordnen sich ohne Änderung am HTML in eine Spalte um:

@media (max-width: 500px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "menu" "main" "foot";
  }
}

Worauf Sie achten sollten

Ein Bereich muss ein Rechteck sein. Eine „L“-Form oder derselbe Name an zwei getrennten Stellen macht die ganze Deklaration ungültig, und der Browser ignoriert sie.
Alle Zeichenketten müssen gleich viele Zellen haben, sonst ist die Deklaration ebenfalls ungültig.
In grid-area schreibt man die Namen ohne Anführungszeichen, in der Karte mit. Die Leerzeichen zwischen den Wörtern sind beliebig – sie in Spalten auszurichten, hilft nur der Lesbarkeit.
Eine geänderte Karte ändert nur das Aussehen; die Reihenfolge für Tastatur und Screenreader folgt dem HTML.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit Oktober 2017, gilt als weithin verfügbar seit April 2020. Ab Version: Chrome 57, Firefox 52, Safari 10.1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
grid-area
grid-template
grid-template-columns
@media