Grid Template Areas

Mit grid-template-areas kannst du dein Layout visuell im CSS-Code beschreiben. Statt mit Liniennummern zu arbeiten, vergibst du Namen für Bereiche wie “header”, “sidebar” und “main”. Das Ergebnis ist CSS, das sich fast wie eine ASCII-Zeichnung deines Layouts liest. In diesem Artikel lernst du, wie du benannte Bereiche definierst, Items zuweist und damit übersichtliche, wartbare Layouts baust.

Steckbrief Grid Template Areas

Syntax: grid-template-areas: "<row1>" "<row2>" ...
Initialwert: none
Vererbt: Nein
Animierbar: Nein

Kategorie: Grid
Werte: 4
Beispiele: 4
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Grundlagen

grid-template-areas definiert benannte Bereiche im Grid. Jeder String in der Deklaration repräsentiert eine Zeile. Die Wörter innerhalb eines Strings repräsentieren die Zellen dieser Zeile. Wenn du denselben Namen in mehreren Zellen verwendest, erstellt CSS daraus einen zusammenhängenden Bereich.

Die Regeln sind einfach: Jede Zeile muss gleich viele Zellen haben. Benannte Bereiche müssen rechteckig sein (kein L- oder T-Form). Für leere Zellen verwendest du einen Punkt (.). Die Bereiche weist du den Grid-Items mit grid-area: name zu.

Die Anzahl der Strings bestimmt die Anzahl der Zeilen, die Anzahl der Wörter pro String die Anzahl der Spalten. grid-template-areas definiert also implizit auch grid-template-rows und grid-template-columns, wobei die Spalten standardmäßig 1fr bekommen und die Zeilen auto.

Syntax & Werte

4 Werte

grid-template-areas

Wert	Beschreibung	Beispiel
`none`	Keine benannten Bereiche definiert (Standard).	grid-template-areas: none
`"<names>"`	Jeder String definiert eine Zeile. Gleiche Namen erzeugen zusammenhängende Bereiche.	grid-template-areas: "header header" "sidebar main"
`.`	Ein Punkt markiert eine leere Zelle, die keinem Bereich zugeordnet ist.	grid-template-areas: "header header" ". main"

grid-area (Benennung)

Wert	Beschreibung	Beispiel
`<custom-ident>`	Weist ein Grid-Item dem benannten Bereich zu.	grid-area: header

grid-area kann auch als Shorthand für die Linien-basierte Platzierung verwendet werden (siehe Grid Platzierung). Hier geht es nur um die Verwendung mit benannten Bereichen.

Beispiele

4 Beispiele

Das klassische Layout mit Header, Sidebar, Hauptbereich und Footer. Die Strings lesen sich wie eine visuelle Darstellung des Layouts.

Seitenlayout mit benannten Bereichen

.page-layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 40px;
  gap: 8px;
}

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

<div class="demo">
<div class="page-layout">
  <div class="hdr">Header</div>
  <div class="sdb">Sidebar</div>
  <div class="mn">Main</div>
  <div class="ftr">Footer</div>
</div>
</div>

Der Punkt (.) markiert Zellen, die keinem Bereich zugeordnet sind. Hier bleibt die linke untere Ecke leer.

Leere Zellen mit Punkt

.container {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    ".       footer  footer";
  grid-template-columns: 120px 1fr 1fr;
  grid-template-rows: 50px 1fr 40px;
  gap: 8px;
}

/* Der Punkt markiert eine leere Zelle */

<div class="demo">
<div class="grid-dots">
  <div class="d-hdr">Header</div>
  <div class="d-sdb">Sidebar</div>
  <div class="d-mn">Main</div>
  <div class="d-ftr">Footer</div>
</div>
</div>

Auf kleinen Bildschirmen werden die Bereiche gestapelt, auf großen Bildschirmen nebeneinander. Du änderst nur grid-template-areas und grid-template-columns in der Media Query.

Responsives Layout (Mobile-Ansicht)

/* Mobile: gestapelt */
.container {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Desktop: 2-Spalten */
@media (min-width: 768px) {
  .container {
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
    grid-template-columns: 200px 1fr;
  }
}

<div class="demo">
<div class="responsive-grid">
  <div class="r-hdr">Header</div>
  <div class="r-mn">Main</div>
  <div class="r-sdb">Sidebar</div>
  <div class="r-ftr">Footer</div>
</div>
</div>

Ein Bereich kann sich über mehrere Zeilen und Spalten erstrecken, solange er rechteckig bleibt. Hier nimmt “main” einen 2x2-Bereich ein.

Bereich über mehrere Zellen

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "main   main   sidebar"
    "main   main   footer";
  grid-template-columns: 1fr 1fr 150px;
  grid-template-rows: 50px 1fr 1fr;
  gap: 8px;
}

/* "main" erstreckt sich über 2 Spalten und 2 Zeilen */
.main { grid-area: main; }

<div class="demo">
<div class="grid-large">
  <div class="l-hdr">Header</div>
  <div class="l-mn">Main (2×2)</div>
  <div class="l-sdb">Sidebar</div>
  <div class="l-ftr">Footer</div>
</div>
</div>

Barrierefreiheit

Benannte Bereiche (grid-template-areas) machen es besonders einfach, Layouts visuell zu reorganisieren, ohne das HTML anzufassen. Doch auch hier gilt: Die visuelle Reihenfolge im Grid hat keinen Einfluss auf die Tab- oder Lesereihenfolge für assistive Technologien. Screenreader und Tastaturnavigation folgen immer der DOM-Reihenfolge (WCAG 1.3.2).

Wenn du ein responsives Layout baust, bei dem z.B. die Sidebar auf Mobile von der Seite nach oben wandert, ist das kein Problem, solange die Sidebar-Inhalte auch im DOM logisch an diese Stelle gehören. Kritisch wird es, wenn du interaktive Elemente (Navigation, Formulare) nur visuell umpositionierst, aber ihre Position im DOM nicht passt.

Praxis-Tipp: Responsive Grid-Umordnungen sind unbedenklich, solange die DOM-Struktur für alle Breakpoints sinnvoll ist. Teste dein Layout mit der Tab-Taste: Wenn der Fokus wild zwischen Bereichen springt, ist die DOM-Reihenfolge falsch.

Häufige Fehler

5 Fehler

01 Nicht-rechteckige Bereiche

Benannte Bereiche müssen immer ein Rechteck bilden. L-förmige oder T-förmige Bereiche sind ungültig und werden vom Browser ignoriert.

02 Ungleiche Zellenanzahl pro Zeile

Jede Zeile in grid-template-areas muss exakt gleich viele Zellen haben. Eine Zeile mit 2 und eine mit 3 Zellen erzeugt einen Fehler.

03 Tippfehler im Area-Namen

Wenn grid-area: hedaer nicht mit "header" in grid-template-areas übereinstimmt, wird das Item nicht platziert. Der Browser gibt keine Warnung aus.

04 grid-template-columns vergessen

Ohne grid-template-columns bekommen alle Spalten die gleiche Breite (1fr). Wenn du eine Sidebar mit fester Breite willst, musst du die Spaltenbreiten explizit setzen.

05 grid-area für Naming und Placement mischen

grid-area kann einen benannten Bereich zuweisen (grid-area: header) ODER als Shorthand für Linien-Platzierung dienen (grid-area: 1 / 1 / 2 / 3). Beides gleichzeitig geht nicht.

Browser-Kompatibilität

5 von 5

grid-template-areas wird von allen modernen Browsern vollständig unterstützt. Es ist seit 2017 in allen relevanten Browsern stabil.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

grid-template-areas hat in HTML-Emails sehr eingeschränkten Support. Für E-Mail-Layouts solltest du auf Tabellen-basierte Layouts zurückgreifen.

Apple Mail

Teilweise

Grundlegende Grid-Areas werden unterstützt
Gmail

Keine

Grid wird komplett ignoriert
Outlook

Keine

Kein Grid-Support, Tabellen-Layouts verwenden
Thunderbird

Teilweise

Grundlegende Grid-Areas werden unterstützt
Yahoo Mail

Keine

Kein Grid-Support

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da