Wie funktionieren `grid-template-areas` und responsive Grids?

Question

Accepted Answer

`grid-template-areas` ermöglicht es dir, ein Grid **visuell** durch die Benennung von Regionen zu layouten, was komplexe Seitenlayouts lesbar und einfach reaktiv umzugestalten macht.

## Definieren benannter Bereiche

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ASCII-Art `grid-template-areas` *ist* das Layout — du kannst die Struktur auf einen Blick sehen, und das Wiederholen eines Namens lässt eine Region über Zellen hinweg erstrecken.

## Neuanordnung für Mobilgeräte — zeichne die Karte einfach neu

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

Um das gesamte Layout für Mobilgeräte zu ändern, schreibst du einfach die Bereichskarte neu — HTML und `grid-area`-Zuweisungen bleiben identisch. Das ist viel sauberer als das individuelle Umpositionieren jedes Elements.

## Warum dies leistungsstark ist

- **Selbstdokumentierend** — CSS spiegelt das gerenderte Layout visuell wider.
- **Entkoppelt von der Quellreihenfolge** — Elemente können unabhängig von der HTML-Reihenfolge überall platziert werden (gut, um `main` im DOM an erster Stelle für Barrierefreiheit zu platzieren, aber trotzdem die Seitenleiste visuell zuerst anzuzeigen).
- **Einfache responsive Umgestaltung** — Bereichsvorlage pro Breakpoint austauschen.

## Warum es wichtig ist

Benannte Grid-Bereiche machen Seitenlayouts (Header/Sidebar/Main/Footer) sowohl lesbar als auch trivial responsive — eine Umstrukturierung ist eine Frage der Bearbeitung einer ASCII-Karte, nicht des Umverdrahtens von Positionen.

Es ist eine der klarsten und wartbarsten Layout-Techniken, die CSS bietet.