Flexbox und Grid kombinieren
Verwenden Sie Grid für das grobe Seitenlayout und Flexbox für die Ausrichtung auf Komponentenebene, und lernen Sie, wann welches Werkzeug die richtige Wahl ist.
Flexbox und Grid kombinieren 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.
Komplementäre Werkzeuge
Flexbox und Grid sind keine Konkurrenten — sie wurden für die Zusammenarbeit entwickelt. Das typische Muster: Verwenden Sie CSS Grid für die übergeordnete Seitenstruktur und anschließend Flexbox innerhalb jedes Grid-Bereichs, um die Inhalte der Komponente anzuordnen.
Seitenlayout mit Grid, Komponenten mit Flexbox
Definieren Sie das übergeordnete Seitengerüst mit Grid. Verwenden Sie innerhalb jedes Grid-Bereichs Flexbox für die Anordnung auf Komponentenebene: Navigationslinks in einer Zeile, Karteninhalte in einer Spalte.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}Muster für Kartenraster
Das klassische Muster: Grid für das Kartenlayout, Flexbox für das interne Layout jeder Karte. So werden die Karten am Raster ausgerichtet, während ihre Inhalte (Bild, Titel, Text, Fußbereich) korrekt untereinander angeordnet werden.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */Muster für Navigationsleisten
Eine gängige Navigationsleiste kombiniert beides. Die Navigation selbst ist ein Flex-Container für Logo und Links. Der Linkbereich kann ein weiterer Flex-Container sein. Ein Mega-Menü könnte Grid für ein mehrspaltiges Layout verwenden.
Holy-Grail-Layout
Das „Holy-Grail“-Layout (Kopfbereich, dreispaltiger Mittelbereich, Fußbereich) lässt sich heute problemlos mit Grid umsetzen. Die drei Spalten — linke Sidebar, Hauptbereich, rechte Sidebar — sind Grid-Spalten; die Inhalte in jeder Spalte werden mit Flexbox angeordnet.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}Alles zentrieren — Grid oder Flexbox
Sowohl Grid als auch Flexbox können Inhalte perfekt zentrieren. Grid: place-items: center (Kurzschreibweise für align-items und justify-items). Flexbox: justify-content: center; align-items: center.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Responsive Sidebar-Layouts
Mobilgeräte: eine Spalte (Navigation oben). Tablets und größere Bildschirme: Sidebar und Inhalt nebeneinander. Mit Grid lässt sich dies deklarativ umsetzen — ändern Sie template-areas in einer Media Query.
Muster für Icon und Text
Ein sehr häufiges Mikro-Layout: ein Icon neben Text. Flexbox eignet sich dafür perfekt, weil es sich um eine einzelne Zeile mit Ausrichtung handelt.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }Wann Sie welches Werkzeug wählen
Grid, wenn Sie in Zeilen UND Spalten denken, wenn Elemente über Tracks hinweg ausgerichtet werden müssen oder wenn Sie ein Seitengerüst erstellen. Flexbox, wenn Sie in eine Richtung denken, wenn Elemente schrumpfen und wachsen sollen oder wenn Sie eine Reihe von Schaltflächen oder einen Stapel von Elementen anordnen.
Nicht unnötig kompliziert machen
Manchmal ist ein einfaches Blockelement mit max-width und margin: auto besser als ein komplexes Raster. Nicht jedes Layout benötigt Grid. Verwenden Sie das einfachste Werkzeug, das die Aufgabe erfüllt.
Layoutprobleme untersuchen
Klicken Sie in den DevTools im Elements-Panel auf die Grid- oder Flex-Labels, um die Rasterlinien oder Umrisse der Flex-Elemente einzublenden. Dadurch wird die unsichtbare Layoutstruktur sichtbar, was für die Diagnose von Fehlausrichtungen äußerst hilfreich ist.
Kurzer Test
Welche Kombination von Layout-Werkzeugen wird am häufigsten für Seiten- bzw. Komponentenlayouts verwendet?
Zusammenfassung: Grid und Flexbox kombinieren
Grid und Flexbox ergänzen sich. Verwenden Sie Grid für eine zweidimensionale Seitenstruktur. Verwenden Sie Flexbox für eindimensionale Komponenteninhalte. place-items: center zentriert mit Grid alles. flex-direction: column und flex: 1 drücken die Fußbereiche von Karten nach unten. Nutzen Sie die Overlay-Labels der DevTools zur Fehlersuche.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Flexbox und Grid kombinieren“ kostenlos?
Ja — der vollständige Text von „Flexbox und Grid kombinieren“ 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 „Flexbox und Grid kombinieren“?
Verwenden Sie Grid für das grobe Seitenlayout und Flexbox für die Ausrichtung auf Komponentenebene, und lernen Sie, wann welches Werkzeug die richtige Wahl ist. 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 „Flexbox und Grid kombinieren“?
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