grid-template-areas: Benannte Bereiche für wartbare Layouts

Mit grid-template-areas bekommt ein Layout etwas, das in CSS selten ist: Lesbarkeit. Statt einzelne Elemente über Spalten- und Zeilennummern zu positionieren, malen Sie das Layout als ASCII-Skizze direkt in den Code. Jeder Bereich trägt einen sprechenden Namen wie header oder sidebar, und schon ein Blick auf die Eigenschaft verrät, wie die Seite aussieht. Dieser Artikel zeigt die vollständige Syntax, die wichtigsten Fallstricke und das tatsächliche Browser-Verhalten, das in vielen Tutorials zu kurz kommt.

Was grid-template-areas eigentlich macht

grid-template-areas ist eine Eigenschaft des Grid-Containers. Sie definiert ein Raster aus benannten Bereichen, indem jede Zeile als String geschrieben wird und jeder Eintrag in diesem String eine Zelle (genauer: eine Grid-Spur an Spalte und Zeile) benennt. Die Eigenschaft erzeugt dadurch implizit sogenannte benannte Grid-Linien: Zu jedem Bereichsnamen foo entstehen automatisch die Linien foo-start und foo-end für Zeilen und Spalten.

Ein Item wird einem Bereich mit grid-area: header; zugewiesen. CSS sucht dann nach den benannten Linien und platziert das Item exakt in das Rechteck, das diese Linien aufspannen. Anders als bei grid-template-columns, das nur die Spaltenbreiten festlegt, beschreibt grid-template-areas die zweidimensionale Anordnung. Beide Eigenschaften arbeiten zusammen: Die Areas legen fest, wo etwas liegt, die Columns- und Rows-Eigenschaften legen fest, wie breit und hoch.

So wird aus Strings ein Layout

Das folgende Diagramm zeigt, wie die drei String-Zeilen einer Areas-Definition direkt zum sichtbaren Layout werden. Jeder Name im String entspricht einer Zelle im Raster.

Die Syntax im Detail

Die Syntax wirkt locker, folgt aber strengen Regeln aus der CSS-Spezifikation. Jeder String steht für eine Zeile des Grids. Die durch Leerzeichen getrennten Wörter (genannt Tokens) innerhalb eines Strings stehen für die Spalten dieser Zeile. Damit die Definition gültig ist, müssen alle Zeilen gleich viele Spalten enthalten, sonst verwirft der Browser die gesamte Eigenschaft als ungültig.

Der wichtigste Punkt: Ein benannter Bereich muss immer ein zusammenhängendes Rechteck ergeben. Verteilen Sie denselben Namen über eine L-Form oder eine unterbrochene Fläche, ist die gesamte Eigenschaft ungültig und wird ignoriert. Das ist die häufigste Ursache, warum ein Layout scheinbar grundlos nicht greift.

Vollständiges Beispiel: das Holy-Grail-Layout

Das klassische Beispiel für benannte Bereiche ist das Holy-Grail-Layout: Kopfzeile oben, Fußzeile unten, in der Mitte Hauptinhalt mit zwei seitlichen Spalten. Mit grid-template-areas ist es in wenigen Zeilen lesbar formuliert:

.layout {
  display: grid;
  grid-template-areas:
    "header header  header"
    "nav    main    aside"
    "footer footer  footer";
  grid-template-columns: 180px 1fr 180px;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  min-height: 100vh;
}

.layout > header { grid-area: header; }
.layout > nav    { grid-area: nav;    }
.layout > main   { grid-area: main;   }
.layout > aside  { grid-area: aside;  }
.layout > footer { grid-area: footer; }

Wer das Layout anpassen will, ändert nur die Strings, nicht eine einzige Zeilen- oder Spaltennummer. Genau das macht den Ansatz so wartbar. Probieren Sie verschiedene Anordnungen direkt im CSS Grid Generator aus, der den fertigen Code samt Areas exportiert.

Die Kurzschreibweise grid-template

Es gibt eine elegante Kurzform, die Areas, Spalten und Zeilen in einer einzigen Eigenschaft kombiniert: grid-template. Dabei wird hinter jeden Areas-String die Höhe der jeweiligen Zeile geschrieben, und nach einem Schrägstrich folgen die Spaltenbreiten. Das hält Form und Größe an einer Stelle zusammen:

.layout {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    main   aside"  1fr
    "footer footer footer" auto
    / 180px 1fr 180px;
}

Diese Form ist kompakt, aber bei langen Layouts schnell unübersichtlich. Für die Lesbarkeit im Team ist die getrennte Schreibweise mit eigener grid-template-areas-Eigenschaft oft die bessere Wahl. Beachten Sie außerdem: grid-template setzt die Eigenschaft grid-auto-flow sowie die impliziten Spuren auf ihre Anfangswerte zurück, die noch umfassendere Kurzform grid tut das ebenfalls.

Responsive umordnen ohne HTML-Änderung

Die größte Stärke benannter Bereiche zeigt sich bei responsiven Layouts. Da Items nur über ihren Namen platziert werden, lässt sich das gesamte Layout in einer Media Query neu anordnen, indem man allein die Areas-Strings überschreibt. Das HTML bleibt unangetastet:

@media (max-width: 640px) {
  .layout {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Häufige Fallstricke und ihr Browser-Verhalten

Einige Eigenheiten führen regelmäßig zu Verwirrung, weil der Browser stillschweigend reagiert, statt einen sichtbaren Fehler zu melden. Die folgende Übersicht fasst die wichtigsten zusammen:

Zum Debuggen sind die DevTools der Browser unverzichtbar: Chrome, Edge und Firefox zeigen im Grid-Inspektor die benannten Bereiche als Overlay an. Firefox blendet auf Wunsch sogar die Bereichsnamen direkt im Layout ein. Wird ein Bereich nicht angezeigt, ist die Definition fast immer ungültig, ein Blick in die Stilansicht zeigt dann die durchgestrichene Eigenschaft.

Wann benannte Bereiche sinnvoll sind und wann nicht

Benannte Bereiche entfalten ihren Vorteil bei überschaubaren, klar gegliederten Seitenlayouts mit wenigen großen Zonen: Header, Sidebar, Hauptinhalt, Footer. Hier ist der ASCII-Plan im Code selbsterklärend und reduziert Fehler beim Umbau. Für sehr feingliedrige Raster mit Dutzenden Zellen oder für dynamisch generierte Karten-Galerien sind sie dagegen unpraktisch, weil jeder Bereich einzeln benannt werden müsste.

In solchen Fällen sind die linienbasierte Platzierung über grid-column und grid-row oder automatische Platzierung mit repeat(auto-fit, minmax(...)) die bessere Wahl. Beide Ansätze lassen sich übrigens mischen: Sie können einen Teil des Grids über Areas benennen und andere Items frei über Liniennummern positionieren.

Häufige Fragen zu grid-template-areas