Subgrid für ausgerichtete verschachtelte Inhalte
Verwenden Sie subgrid, um verschachtelte Grid-Items an den Tracks des übergeordneten Grids auszurichten.
Subgrid für ausgerichtete verschachtelte Inhalte 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.
Das Subgrid-Problem
Eine häufige Herausforderung: Sie haben ein Raster aus Karten, die jeweils einen Header, einen Inhaltsbereich und einen Footer enthalten. Ohne Subgrid können Elemente in verschiedenen Karten nicht an denselben Grundlinien ausgerichtet werden, da jede Karte ihr eigenes, unabhängiges Layout besitzt.
Was ist Subgrid?
subgrid ist ein Wert für grid-template-columns oder grid-template-rows, der bewirkt, dass ein verschachteltes Grid die Track-Definitionen des übergeordneten Grids erbt und an ihnen teilnimmt.
grid-template-rows: subgrid
Ein Grid-Item, das zugleich als Grid-Container dient, kann subgrid verwenden, um seine untergeordneten Elemente an den Tracks des übergeordneten Grids auszurichten:
<div class="card-grid">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
</div>grid-template-columns: subgrid
Ebenso ermöglicht subgrid für Spalten, verschachtelte Elemente an den Spalten-Tracks des übergeordneten Grids auszurichten — nützlich für ausgerichtete Label-Wert-Paare oder Formularfelder über mehrere Kartenspalten hinweg.
Subgrid im Vergleich zu align-content
Ohne Subgrid können Sie Inhalte teilweise mit align-content oder festen Höhen ausrichten, aber das ist anfällig. Subgrid ermöglicht eine echte Ausrichtung, die von den tatsächlichen Inhaltshöhen gesteuert wird.
Subgrid zur Formularausrichtung
Ausrichten von Label-Eingabefeld-Paaren über mehrere Formularspalten hinweg:
<div class="form-grid">
<div class="form-section">
<label>Name</label><input placeholder="Name" />
<label>Email</label><input placeholder="Email" />
</div>
</div>Subgrid über mehrere Zeilen und Spalten
Ein Subgrid kann sich über mehrere Tracks des übergeordneten Grids erstrecken und Tracks aus beiden Richtungen erben:
<div class="layout"><div class="feature">Feature spans grid</div></div>Benannte Bereiche mit Subgrid
Wenn ein Subgrid benannte Tracks vom übergeordneten Grid erbt, stehen diese Namen für die Platzierung innerhalb des Subgrid-Containers zur Verfügung.
Vererbung von Abständen
Subgrids erben standardmäßig die gap-Werte des übergeordneten Grids. Das verschachtelte Grid verwendet dasselbe Abstandssystem.
Hinweis zur Browserunterstützung
Subgrid ist in Firefox seit 2019 verfügbar. Chrome hat die Unterstützung 2023 hinzugefügt. Alle modernen Browser unterstützen es inzwischen. Prüfen Sie die Unterstützung für Ihre Zielgruppe, bevor Sie Subgrid in der Produktion einsetzen.
Progressive Verbesserung mit Subgrid
Stellen Sie für ältere Browser zunächst eine Fallback-Lösung mit festen Höhen oder Flexbox-Ausrichtung bereit, bevor Sie Subgrid als Verbesserung hinzufügen:
<div class="card-grid"><div class="card">Card content</div></div>Kurzer Test
Was bewirkt grid-template-rows: subgrid bei einem Grid-Item?
Zusammenfassung
Subgrid löst das Ausrichtungsproblem für verschachtelte Grid-Inhalte, etwa in Karten-Grids, bei denen Elemente aus verschiedenen Karten an derselben Grundlinie ausgerichtet werden müssen. Verwenden Sie grid-template-rows: subgrid bei Grid-Items, die sich über mehrere Zeilen erstrecken, und grid-template-columns: subgrid für verschachtelte Inhalte, die an Spalten ausgerichtet werden sollen. Moderne Browser unterstützen Subgrid inzwischen flächendeckend.
Häufig gestellte Fragen
Ist die Lektion „Subgrid für ausgerichtete verschachtelte Inhalte“ kostenlos?
Ja — der vollständige Text von „Subgrid für ausgerichtete verschachtelte Inhalte“ 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 „Subgrid für ausgerichtete verschachtelte Inhalte“?
Verwenden Sie subgrid, um verschachtelte Grid-Items an den Tracks des übergeordneten Grids auszurichten. 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 „Subgrid für ausgerichtete verschachtelte Inhalte“?
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
- Benannte Linien und benannte Grid-Bereiche
- Auto-fit und Auto-fill mit minmax
- Implizites Grid und Grid-Auto-Flow
- Subgrid für ausgerichtete verschachtelte Inhalte