CSS Grid und Flexbox mit Claude Code: Moderne Layouts 2026
CSS Grid und Flexbox sind die zwei mächtigsten Layout-Systeme im Web — Grid für zweidimensionale Layouts, Flexbox für eindimensionale Anordnungen. Claude Code wählt das richtige Tool, erklärt den Unterschied und generiert komplexe, responsive Layouts.
CSS Grid: Zweidimensionale Layouts
GridNamed Areas und Template-Systeme
# Prompt: "Erstelle ein klassisches Dashboard-Layout mit
# Header, Sidebar, Content und Footer — responsiv"
/* Claude Code generiert — Named Grid Areas: */
.dashboard {
display: grid;
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
grid-template-columns: 240px 1fr 200px;
grid-template-rows: 64px 1fr 48px;
min-height: 100vh;
gap: 0;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
/* Responsive: Mobile = alles vertikal */
@media (max-width: 768px) {
.dashboard {
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.aside { display: none; }
}
Sidebar
Content
Aside
Grid Auto-Placement und Subgrid
SubgridVerschachtelte Grids ausrichten
# Auto-Fill und Auto-Fit — responsive ohne Media Queries:
.card-grid {
display: grid;
/* Automatisch so viele Spalten wie passen, min 250px */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 24px;
}
/* Auto-Fill vs Auto-Fit:
auto-fill: behält leere Spalten (Grid-Struktur bleibt)
auto-fit: kollabiert leere Spalten → Karten strecken sich */
/* Subgrid: Kind-Elemente am Parent-Grid ausrichten (neu!) */
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 16px;
}
.card {
display: grid;
grid-row: span 2;
/* Subgrid: nutzt Parent-Spalten für Kinder */
grid-template-rows: subgrid;
}
/* Alle Karten-Header und -Bodies auf gleicher Linie! */
.card-header { grid-row: 1; }
.card-body { grid-row: 2; }
Flexbox: Eindimensionale Meisterklasse
FlexboxAlignment und Space Distribution
# Prompt: "Erkläre alle Flexbox-Alignment-Properties und wann ich welche nutze"
/* Hauptachse (justify-content): horizontale Verteilung */
.flex-container {
display: flex;
justify-content: space-between; /* Items an den Enden + Raum dazwischen */
justify-content: space-around; /* Gleicher Raum um jedes Item */
justify-content: center; /* Zentriert */
justify-content: flex-end; /* Rechts bündig */
}
/* Querachse (align-items): vertikale Ausrichtung */
align-items: stretch; /* Standard: Items füllen Höhe */
align-items: center; /* Vertikal zentriert */
align-items: flex-start; /* Oben bündig */
align-items: baseline; /* An Textbasis ausrichten */
/* Flex-Sizing: grow, shrink, basis */
.sidebar { flex: 0 0 240px; } /* Keine Flex: immer 240px */
.content { flex: 1; } /* Wächst um verbleibenden Raum */
/* Gap statt Margin-Hacks: */
.nav { display: flex; gap: 16px; }
CSS Grid vs. Flexbox: Wann was?
EntscheidungDas richtige Tool wählen
# Claude Code entscheidet automatisch richtig:
/* Grid: 2D-Layouts — Rows UND Columns wichtig */
✅ Page-Layout (Header/Sidebar/Content/Footer)
✅ Card-Grid (gleichmäßige Kacheln)
✅ Dashboard-Widgets
✅ Wenn Kinder sich an anderen Kindern ausrichten sollen
/* Flexbox: 1D-Layouts — Row ODER Column */
✅ Navigation (horizontal)
✅ Button-Gruppen
✅ Karten-Inhalt (vertikal)
✅ Icon + Text nebeneinander
✅ Centering (display: flex; align-items: center; justify-content: center)
/* Moderner Centering-Trick (kein Flex/Grid nötig): */
.centered {
place-content: center; /* Kurzform für align + justify */
display: grid; /* oder flex */
}
Layout-Prompt: "Baue dieses Layout nach [Beschreibung/Screenshot]. Erkläre warum du Grid oder Flexbox wählst und generiere optimales, responsives CSS." Claude Code wählt immer das semantisch korrekte Layout-System.
CSS-Modul im Kurs
Im Claude Code Mastery Kurs: vollständiges CSS-Modul — Grid, Flexbox, Subgrid, Container Queries, CSS Custom Properties und moderne Layout-Techniken.
14 Tage kostenlos testen →