CSS Grid: template-areas, auto-fit, minmax
Benennen Sie Grid-Bereiche für übersichtliche Layouts, verwenden Sie auto-fit mit minmax() für responsive Spalten und steuern Sie implizite Tracks.
CSS Grid: template-areas, auto-fit, minmax ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Benannte Template-Bereiche — visuelles Layout
Mit grid-template-areas können Sie Bereiche in einem visuellen ASCII-Art-Format benennen. Jede Zeichenkette entspricht einer Zeile, jedes Wort einer Zelle. Punkte (.) stehen für leere Zellen. Weisen Sie Elementen mit grid-area: name einen Bereich zu.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Responsive Template-Bereiche mit Media Queries
Ändern Sie das Layout von template-areas an Breakpoints, um die Sidebar auf Mobilgeräten von einer Spalte unter den Hauptinhalt zu verschieben.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit im Vergleich zu auto-fill
auto-fit: Leere Tracks werden ausgeblendet, sodass sich die Elemente über die gesamte Zeile ausdehnen. auto-fill: Die Rasterstruktur bleibt erhalten, auch wenn Tracks leer sind. Für responsive Kartenraster ist auto-fit fast immer die richtige Wahl.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}minmax() im Detail
minmax(min, max) definiert einen Track, der mindestens min und höchstens max groß ist. Häufige Kombinationen: minmax(0, 1fr) (vollständig flexibel), minmax(200px, 1fr) (responsive mit Mindestgröße), minmax(auto, auto) (an den Inhalt angepasst).
Spalten und Zeilen überspannen
Verwenden Sie grid-column: span 2, damit ein Element zwei Spalten überspannt. Kombinieren Sie dies mit grid-row: span 2, um ein hervorgehobenes Element als 2×2-Block im Raster darzustellen.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}Dichte automatische Platzierung
grid-auto-flow: dense füllt leere Lücken nachträglich mit kleineren Elementen. Das ist für masonry-ähnliche Layouts nützlich, in denen Elemente unterschiedlich groß sind.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}Bruchteilseinheiten und Prozentangaben
Die Einheit fr bezieht sich immer auf den verfügbaren Platz, nachdem Tracks mit fester Größe und Abstände abgezogen wurden. Durch die Kombination von fr mit festen Größen erhalten Sie maximale Flexibilität: eine feste Sidebar und einen flexiblen Hauptbereich.
grid-auto-columns und grid-auto-rows
Diese Eigenschaften steuern die Größe implizit erstellter Tracks, wenn Elemente außerhalb des expliziten Rasters platziert werden. grid-auto-rows: minmax(100px, auto) gibt impliziten Zeilen eine Mindesthöhe.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}Raster in DevTools untersuchen
Chrome DevTools blendet Rasterlinien und Bereichsnamen auf der Seite ein, wenn Sie im Elements-Panel auf das 'grid'-Label neben einem Raster-Container klicken. Verwenden Sie diese Funktion, um unerwartete Track-Größen und die Platzierung von Elementen zu untersuchen.
CSS Subgrid
grid-template-columns: subgrid ermöglicht es einem verschachtelten Raster, sich an den Tracks des übergeordneten Rasters auszurichten. Seit 2023 wird dies von allen modernen Browsern unterstützt — unerlässlich, um die Inhalte von Karten in einem Kartenraster auszurichten.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}Wann Grid Flexbox überlegen ist
Grid ist die bessere Wahl, wenn Sie eine explizite zweidimensionale Kontrolle benötigen — wenn also sowohl Zeilen als auch Spalten wichtig sind. Wenn Sie Elemente lediglich in einer Zeile oder einem Stapel anordnen möchten, ist Flexbox einfacher.
Kurzer Test
Welcher CSS-Grid-Wert erstellt so viele Spalten wie möglich, wobei jede mindestens 200px breit ist und sich den verbleibenden Platz gleichmäßig teilt?
Zusammenfassung: CSS Grid für Fortgeschrittene
grid-template-areas erstellt übersichtliche benannte Layouts. auto-fit und minmax ermöglichen responsive Raster ohne Media Queries. Lassen Sie Elemente mehrere Spalten und Zeilen überspannen. Dense Auto-Flow füllt Lücken. Verwenden Sie die Grid-Überlagerung in den DevTools zur Fehlersuche. Subgrid richtet verschachtelte Elemente an den Tracks des übergeordneten Rasters aus.
Häufig gestellte Fragen
Ist die Lektion „CSS Grid: template-areas, auto-fit, minmax“ kostenlos?
Ja — der vollständige Text von „CSS Grid: template-areas, auto-fit, minmax“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „CSS Grid: template-areas, auto-fit, minmax“?
Benennen Sie Grid-Bereiche für übersichtliche Layouts, verwenden Sie auto-fit mit minmax() für responsive Spalten und steuern Sie implizite Tracks. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 2 von 4.
Wie lange dauert die Lektion „CSS Grid: template-areas, auto-fit, minmax“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- Flexbox im Detail: Ausrichtung, Umbruch, Reihenfolge
- CSS Grid: template-areas, auto-fit, minmax
- Flexbox und Grid kombinieren
- CSS-Variablen für Themes