grid-template-areas – ein Layout, das man im Code sehen kann

Von allen CSS-Funktionen der letzten Jahre ist das die, bei der ich am ehesten „warum ging das nicht immer so?" denke. Du beschreibst dein Layout als Bild — im Code:

.seite {
    display: grid;
    grid-template-areas:
        "kopf   kopf"
        "leiste inhalt"
        "fuss   fuss";
    grid-template-columns: 240px 1fr;
    gap: 20px;
}

.kopf   { grid-area: kopf; }
.leiste { grid-area: leiste; }
.inhalt { grid-area: inhalt; }
.fuss   { grid-area: fuss; }

Man muss das nicht erklären. Die Kopfzeile geht über beide Spalten, links die Leiste, rechts der Inhalt, unten die Fußzeile über die volle Breite. Wer in einem halben Jahr in diese Datei schaut, sieht das Layout, statt es aus grid-column: 1 / 3 rekonstruieren zu müssen.

Auf dem Handy: dieselben Teile, andere Zeichnung

@media (max-width: 700px) {
    .seite {
        grid-template-areas:
            "kopf"
            "inhalt"
            "leiste"
            "fuss";
        grid-template-columns: 1fr;
    }
}

Das ist der eigentliche Gewinn. Die Seitenleiste rutscht auf dem Handy unter den Inhalt — im HTML hat sich nichts geändert, es steht dort weiterhin vor dem Inhalt. Und weil sich nur die Darstellung ändert, bleibt die Vorlesereihenfolge für Screenreader die des HTML.

Das ist übrigens der Punkt, an dem man aufpassen muss: Eine Anordnung, die visuell stark von der HTML-Reihenfolge abweicht, verwirrt Nutzer, die per Tastatur navigieren. Ein Umsortieren wie hier ist unkritisch; ein Layout, in dem der Absenden-Knopf optisch vor den Feldern steht, wäre es nicht.

Leere Felder

Ein Punkt lässt eine Zelle bewusst frei:

grid-template-areas:
    "bild titel"
    ".    text";

Praktisch für Layouts, in denen etwas eingerückt weiterlaufen soll.

Zwei Dinge, die ich mir gemerkt habe

Alle Zeilen brauchen gleich viele Felder. Vergisst du eines, ist die ganze Regel ungültig — und zwar stillschweigend. Das Layout fällt dann auf ein einspaltiges Grid zurück, was beim Suchen zuerst wie ein anderer Fehler aussieht.

Ein Bereich muss ein Rechteck sein. "a b a" funktioniert nicht, weil a sonst zwei getrennte Flecken wäre. Klingt einschränkend, ist es in der Praxis nie.

Wann Areas, wann nicht?

Für das Seitengerüst — Kopf, Leiste, Inhalt, Fuß — nehme ich immer Areas. Für Listen gleichartiger Karten dagegen nicht: Da will man keine Namen vergeben, sondern repeat(auto-fill, minmax(240px, 1fr)) und den Browser rechnen lassen.

Grob gesagt: benannte Bereiche für das, was einmalig ist; automatische Spalten für das, was sich wiederholt.

Du hast eine Seite, deren Layout auf dem Handy zerfällt? Häufig ist es genau der Sprung von „nebeneinander" zu „untereinander", der nie sauber definiert wurde. Melde dich, ich schaue es mir an.

Quellen

• MDN: grid-template-areas
• MDN: Grid template areas – Leitfaden
• W3C: CSS Grid Layout Module Level 2