Grid-Template-Areas
Benennen Sie Grid-Bereiche mit grid-template-areas, um lesbare und semantische Layouts zu erstellen.
Grid-Template-Areas ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Benannte Grid-Bereiche
grid-template-areas ermöglicht es, Regionen des Grids mithilfe von ASCII-Art zu benennen. Dadurch werden Layouts sehr übersichtlich und wartungsfreundlich.
Template-Bereiche definieren
Jede Zeichenfolge in Anführungszeichen stellt eine Zeile dar. Zellen mit demselben Namen bilden einen rechteckigen Bereich. Verwenden Sie . für leere Zellen.
<div class="page" style="min-height:240px;">
<header style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<aside style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</aside>
<main style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>Elemente anhand ihres Namens platzieren
Weisen Sie Grid-Elemente benannten Bereichen zu, indem Sie die Eigenschaft grid-area mit dem Namen des Bereichs verwenden (ohne Anführungszeichen):
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'header header' 'sidebar main' 'footer footer';min-height:220px;gap:4px;">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<div class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<main style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>Regeln für Template-Bereiche
Benannte Bereiche müssen rechteckig sein. Jede Zelle kann nur zu einem Bereich gehören. Ein Bereichsname darf nicht in nicht zusammenhängenden Zellen vorkommen – das wäre ungültig.
Leere Zellen mit .
Verwenden Sie einen oder mehrere Punkte, um leere Zellen in grid-template-areas zu kennzeichnen:
<div class="layout" style="display:grid;min-height:200px;">
<div style="grid-area:logo;background:#4f8cff22;border:1px solid #4f8cff;">Logo</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:sidebar;background:#b57bff22;border:1px solid #b57bff;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>Responsive Bereiche mit Media Queries
Definieren Sie grid-template-areas in Media Queries neu, um die Layoutstruktur vollständig umzugestalten:
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Narrow (default) preview below. Widen your browser to ≥768px to see the media query apply the two-column layout live.</p>
<div class="page" style="min-height:200px;margin-bottom:16px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Preview of the ≥768px layout (static reference — not driven by the media query):</p>
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-areas:'header header' 'sidebar main' 'footer footer';gap:4px;min-height:160px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>Automatisch erzeugte benannte Linien
Wenn Sie einen Bereich benennen, erstellt CSS automatisch benannte Grid-Linien: area-start und area-end für Zeilen und Spalten.
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;grid-template-areas:'aside main' 'aside main';gap:0;min-height:160px;">
<div style="grid-area:aside;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Aside</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content</div>
<div class="overlay" style="grid-row:1/3;background:rgba(255,99,71,0.3);border:2px dashed tomato;padding:4px;">Overlay via named lines main-start / main-end</div>
</div>Bereiche und Liniennummern kombinieren
Benannte Bereiche und explizite Liniennummern können im selben Grid nebeneinander verwendet werden. Elemente können anhand eines Namens, einer Linie oder eines Spans platziert werden.
Workflow für visuelles Grid-Design
Ein häufig verwendeter Workflow: Skizzieren Sie das Layout zunächst in Template-Bereichen und definieren Sie anschließend die Größen von Spalten und Zeilen. So trennen Sie die Struktur von der Größenbestimmung.
<div class="dashboard" style="display:grid;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;">Header</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:ads;background:#b57bff22;border:1px solid #b57bff;">Ads</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>Template-Bereiche und Barrierefreiheit
Die visuelle Reihenfolge eines Grids kann von der Reihenfolge im DOM-Quelltext abweichen. Screenreader folgen der DOM-Reihenfolge, nicht der visuellen Platzierung. Achten Sie darauf, dass die Reihenfolge im DOM auch dann logisch ist, wenn Elemente durch die Grid-Platzierung visuell neu angeordnet werden.
Kurzschreibweise für grid-template
Kombinieren Sie grid-template-areas, grid-template-columns und grid-template-rows in einer einzigen grid-template-Deklaration.
<div class="page" style="display:grid;min-height:200px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>Kurztest
Welches Zeichen wird in grid-template-areas verwendet, um eine leere Zelle zu kennzeichnen?
Zusammenfassung
grid-template-areas verwendet ASCII-Art, um Layoutbereiche zu benennen. Elemente werden mit grid-area: name platziert. Bereiche müssen rechteckig sein, und leere Zellen verwenden .. Definieren Sie Bereiche in Media Queries neu, um vollständig responsive Layouts mit übersichtlichem, gut lesbarem CSS zu erstellen.
Häufig gestellte Fragen
Ist die Lektion „Grid-Template-Areas“ kostenlos?
Ja — der vollständige Text von „Grid-Template-Areas“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Grid-Template-Areas“?
Benennen Sie Grid-Bereiche mit grid-template-areas, um lesbare und semantische Layouts zu erstellen. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Grid-Template-Areas“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Display Grid und Template-Spalten und -Zeilen
- Die fr-Einheit und Repeat
- Gap und Grid-Platzierung
- Grid-Template-Areas