Grid Template Areas

Zuletzt aktualisiert am 15. Februar 2026

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.

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

grid-template-areas

grid-area (Benennung)

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

Einfaches Seitenlayout

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

.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>

Leere Bereiche mit Punkt

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

.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>

Responsives Layout mit Media Queries

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.

/* 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>

Großer Bereich über mehrere Zellen

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

.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

• 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.
• 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.
• 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.
• 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.
• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften