CSS Grid für Layouts
Definieren Sie mit CSS Grid Zeilen und Spalten, platzieren Sie Elemente präzise und erstellen Sie gängige Seitenlayouts mit wenig Code.
CSS Grid für Layouts ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Was ist CSS Grid?
CSS Grid ist ein zweidimensionales Layoutsystem — Sie steuern sowohl Zeilen als auch Spalten. Es ist das beste Werkzeug für die Gesamtstruktur einer Seite und die gezielte Platzierung von Elementen in einem definierten Grid.
Spalten definieren: grid-template-columns
grid-template-columns definiert die Spaltenstruktur. Verwenden Sie feste Größen (px), flexible Bruchteile (fr) oder auto. repeat(n, size) wiederholt eine Track-Definition.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}Die fr-Einheit
fr (Bruchteilseinheit) verteilt den verbleibenden Platz proportional. 1fr 2fr gibt der zweiten Spalte doppelt so viel Platz wie der ersten. Das ist unverzichtbar für flexible Grid-Tracks.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}Zeilen definieren: grid-template-rows
Sie können auch Zeilen explizit definieren. Wenn Sie das nicht tun, erstellt der Browser automatisch implizite Zeilen. grid-auto-rows: minmax(200px, auto) legt die Größe impliziter Zeilen fest.
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}gap in Grid
Wie bei Flexbox fügt gap zwischen Grid-Tracks Platz ein, ohne die äußeren Ränder zu beeinflussen. row-gap und column-gap steuern die Achsen getrennt.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}grid-template-areas
Benennen Sie Grid-Bereiche mit Strings und weisen Sie ihnen mit grid-area Elemente zu. Dadurch entsteht lesbarer, visuell nachvollziehbarer Layout-Code.
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Elemente mit grid-column und grid-row platzieren
Steuern Sie mit grid-column: start / end und grid-row: start / end genau, wo ein Element platziert wird. Verwenden Sie -1, um auf die letzte Linie zu verweisen. span N erstreckt sich über N Tracks.
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fit und minmax() — Responsive Spalten
Die leistungsfähigste einzeilige Lösung für ein responsives Grid: repeat(auto-fit, minmax(280px, 1fr)). Sie erstellt so viele Spalten wie möglich, die jeweils mindestens 280px breit sind, und füllt den verbleibenden Platz mit 1fr.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fill im Vergleich zu auto-fit
auto-fill erstellt Tracks, auch wenn diese leer sind, und hält dadurch ein festes Grid aufrecht. auto-fit blendet leere Tracks aus, sodass sich die Elemente ausdehnen und die Zeile ausfüllen. Verwenden Sie auto-fit für Inhalte, die sich ausdehnen sollen.
Implizites und explizites Grid
Die von Ihnen definierten Tracks bilden das explizite Grid. Wenn Sie mehr Elemente hinzufügen, als definierte Tracks vorhanden sind, erstellt der Browser implizite Tracks. Steuern Sie deren Größe mit grid-auto-rows und grid-auto-columns.
Grid oder Flexbox — wann Sie welches verwenden
Grid: zweidimensionale Layouts, Seitenstruktur, Galerien, Dashboards. Flexbox: eindimensionale Zeilen oder Stapel, Zentrierung, Verteilung von Elementen in einer Zeile. Beide ergänzen sich — verwenden Sie Grid für das Grundgerüst der Seite und Flexbox für die internen Strukturen von Komponenten.
Kurztest
Welcher CSS-Wert erstellt Spalten, die mindestens 250px breit sind und den verbleibenden Platz gleichmäßig teilen?
Zusammenfassung: CSS Grid
grid-template-columns definiert Spalten. fr teilt den Platz. repeat() vereinfacht Wiederholungen. gap fügt Zwischenräume ein. grid-template-areas macht Layouts lesbarer. auto-fit + minmax erstellt responsive Grids ohne Media Queries. Grid ist die erste Wahl für zweidimensionale Seitenlayouts.
Häufig gestellte Fragen
Ist die Lektion „CSS Grid für Layouts“ kostenlos?
Ja — der vollständige Text von „CSS Grid für Layouts“ 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 für Layouts“?
Definieren Sie mit CSS Grid Zeilen und Spalten, platzieren Sie Elemente präzise und erstellen Sie gängige Seitenlayouts mit wenig Code. 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 3 von 4.
Wie lange dauert die Lektion „CSS Grid für Layouts“?
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
- Das viewport-Meta-Tag
- Flexbox für Layouts
- CSS Grid für Layouts
- Media Queries und Mobile-First-Entwicklung