CSS Grid-Areas
Grid-Items lehrten Liniennummern und span. Benannte Areas stellen eine freundlichere Frage: Kannst du die Seite als Wörter zeichnen — header, sidebar, main, footer — und jedes Kind ein Label beanspruchen lassen? grid-template-areas ist die Karte; grid-area ist der Pin.
Ein Grid-Areas-Werkzeugkasten
📊 Grid-Areas auf einen Blick
| Eigenschaft / Token | Alltagsjob |
|---|---|
grid-template-areas |
Am Container: zitierte Zeilenstrings, die jede Zelle benennen |
grid-area |
Am Item: welche benannte Region dieses Kind belegt |
| Wiederholter Name | Derselbe Name in angrenzenden Zellen = ein spannendes Rechteck |
. (Punkt) |
Eine leere Zelle ohne Namen |
| Template-Tracks | Größe weiterhin mit grid-template-columns / rows setzen |
Jeder zitierte String ist eine Zeile der Karte. Namen in einer Zeile sind durch Leerzeichen getrennt. Jede Zeile muss dieselbe Zellenzahl listen, sonst ist das Template ungültig.
grid-template-areas — die Karte zeichnen
Schreibe das Layout, das du meinst, in klaren Labels. Eine klassische Seitenhülle sieht oft wie vier benannte Rollen über drei Zeilen aus.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
grid-area — jedes Kind pinnen
Jedes Kind wählt einen Namen von der Karte. Klassennamen dürfen BEM-Stil bleiben; das Area-Token ist, was Grid liest.
.shell__header { grid-area: header; }
.shell__aside { grid-area: aside; }
.shell__main { grid-area: main; }
.shell__footer { grid-area: footer; }
Spannen durch Wiederholen eines Namens
Um eine Region zu strecken, schreibe denselben Namen in jede Zelle, die dazugehören soll. Die Region muss ein festes Rechteck bleiben — keine L-Formen.
.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero hero hero"
"card1 card2 card3";
gap: 0.75rem;
}
.magazine__hero { grid-area: hero; }
Leere Zellen mit einem Punkt
Ein alleinstehendes . markiert ein Loch. Nützlich, wenn ein Kartenboard eine Lücke lassen soll, ohne einen Fake-Namen zu erfinden.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta gamma";
gap: 0.5rem;
}
.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }
Eine ruhige Gewohnheit für benannte Areas
Skizziere die Karte in grid-template-areas, dimensioniere Tracks mit columns/rows, dann pinne Kinder mit grid-area. Halte Namen kurz und rechteckig. Weiche auf grid-column / grid-row aus, wenn eine einmalige Platzierung klarer ist als die ganze Karte umzuschreiben. Responsive Umschreibungen der Karte warten auf Grid Responsive.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}
.page__nav { grid-area: nav; }
.page__content { grid-area: content; }
Probier es selbst
- Zeichne eine header / aside+main / footer-Karte mit
grid-template-areas. - Weise vier Kindern passende
grid-area-Werte zu. - Baue einen Drei-Spalten-Hero, der
heroüber die erste Zeile wiederholt. - Lass eine leere Zelle mit
.in einem Zwei-mal-Zwei-Board. - Behalte Track-Größen am Container; notiere Kartentausch für die nächste responsive Grid-Lektion.
Häufige Fehler
- Eine L-förmige oder getrennte Region benennen (Areas müssen Rechtecke sein)
- Unterschiedliche Zellenzahlen zwischen zitierten Zeilen
grid-template-areasauf ein Kind statt den Container setzen- Area-Namen wie CSS-Klassenselektoren behandeln — sie sind Template-Tokens
grid-template-columns/rowsweglassen und hoffen, Namen allein setzen Größen
Zusammenfassung
- Benannte Areas machen aus einem Layout eine lesbare Zellkarte
grid-template-areaslebt am Container;grid-areaan jedem Item- Wiederhole einen Namen zum Spannen; nutze
.für leere Zellen - Halte Regionen rechteckig und paare Namen mit Track-Sizing
- Linienplatzierung funktioniert weiter; responsive Kartenänderungen kommen als Nächstes
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt