CSS Grid Advanced mit Claude Code 2026
CSS Grid ist das mächtigste Layout-System im Web — Subgrid, Container Queries und Auto-Placement ermöglichen Layouts die früher JavaScript erforderten. Claude Code kennt alle Grid-Tricks und generiert wartbare, responsive Layouts ohne Framework-Abhängigkeiten.
1. Grid Template Areas — Benannte Bereiche & ASCII-Art Syntax
Grid Template Areas sind der intuitivste Weg, komplexe Seiten-Layouts zu definieren. Mit der ASCII-Art-Syntax beschreibt man das Layout visuell direkt im CSS — Claude Code nutzt diese Technik konsequent und erzeugt dadurch wartbaren Code, der auf den ersten Blick verständlich ist.
AREAS Vollständiges Page-Layout mit benannten Bereichen
/* Claude Code Prompt: "Erstelle ein klassisches Blog-Layout
mit Header, Sidebar, Content und Footer via Grid Template Areas" */
.page-layout {
display: grid;
grid-template-areas:
"header header header"
"nav content aside"
"nav content aside"
"footer footer footer";
grid-template-columns: 220px 1fr 280px;
grid-template-rows: auto 1fr 1fr auto;
min-height: 100vh;
gap: 0;
}
.site-header { grid-area: header; }
.site-nav { grid-area: nav; }
.main-content { grid-area: content; }
.sidebar { grid-area: aside; }
.site-footer { grid-area: footer; }
/* Tablet: Sidebar unter Content verschieben */
@media (max-width: 1024px) {
.page-layout {
grid-template-areas:
"header header"
"nav nav"
"content content"
"aside aside"
"footer footer";
grid-template-columns: 1fr 1fr;
}
}
/* Mobile: Alles einspaltig */
@media (max-width: 640px) {
.page-layout {
grid-template-areas:
"header"
"nav"
"content"
"aside"
"footer";
grid-template-columns: 1fr;
}
}
Claude Code Trick: Beim Prompt "Erstelle ein responsives Dashboard-Layout" generiert
Claude Code automatisch drei Media-Query-Breakpoints mit passenden Grid-Template-Areas — inklusive
Kommentaren, die erklären was in welchem Breakpoint passiert.
AREAS Dot-Syntax für leere Zellen
/* Punkt (.) = leere Zelle — kein Bereich belegt diese Position */
.card-layout {
display: grid;
grid-template-areas:
"hero hero hero"
"card1 . card2"
"card3 card3 card3";
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* Named-Area mit CSS custom property für dynamischen Wechsel */
.feature-block {
grid-area: hero;
padding: clamp(24px, 5vw, 64px);
}
.card:nth-child(1) { grid-area: card1; }
.card:nth-child(2) { grid-area: card2; }
.card:nth-child(3) { grid-area: card3; }
Die Dot-Syntax hält die visuelle Darstellung des Layouts im CSS exakt — was man im Code sieht, entspricht dem tatsächlichen Layout im Browser. Claude Code bevorzugt diese explizite Schreibweise gegenüber impliziter Positionierung.
2. Subgrid — Verschachtelte Grids ausrichten
Subgrid ist eines der wichtigsten CSS-Features der letzten Jahre. Seit 2023 in allen modernen Browsern verfügbar, ermöglicht es verschachtelten Elementen, die Tracks des Eltern-Grids zu erben — so lassen sich Karten-Layouts mit perfekt ausgerichteten Inhalten ohne JavaScript-Tricks realisieren.
SUBGRID Karten mit ausgerichteten Inhalten
/* Claude Code Prompt: "Blog-Card-Grid wo alle Karten-Bereiche
(Bild, Titel, Text, CTA) auf derselben Baseline ausgerichtet sind" */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
/* Jede Karte erbt die Row-Tracks des Eltern-Grids */
.card {
display: grid;
grid-row: span 4; /* 4 Zeilen: Bild, Titel, Text, CTA */
grid-template-rows: subgrid;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
}
.card-image {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
}
.card-title {
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 700;
padding: 16px 16px 0;
align-self: start; /* am oberen Rand der Zeile */
}
.card-excerpt {
padding: 8px 16px;
color: #64748b;
font-size: .9rem;
align-self: start;
}
.card-cta {
padding: 0 16px 16px;
align-self: end; /* CTAs immer am unteren Rand */
}
/* Ohne Subgrid wären die CTAs unterschiedlich hoch */
/* Mit subgrid: alle CTAs auf derselben Linie — ohne JS! */
Subgrid Browser-Support: Chrome 117+, Firefox 71+, Safari 16+. Alle modernen Browser
unterstützen Subgrid vollständig. Claude Code prüft auf Anfrage automatisch, ob ein Fallback
für ältere Browser nötig ist, und schlägt
align-items: start auf dem Eltern-Grid als
pragmatische Alternative vor.
SUBGRID Formular-Alignment mit Subgrid
/* Labels und Inputs in verschachtelten Formularen ausrichten */
.form-grid {
display: grid;
grid-template-columns: max-content 1fr;
gap: 16px 24px;
align-items: baseline;
}
.form-group {
display: grid;
grid-column: 1 / -1; /* volle Breite */
grid-template-columns: subgrid; /* erbt 2-Spalten-Track */
}
.form-group label {
grid-column: 1;
font-weight: 600;
white-space: nowrap;
}
.form-group input,
.form-group select,
.form-group textarea {
grid-column: 2;
width: 100%;
box-sizing: border-box;
}
3. Auto-Placement Algorithm — auto-fill vs auto-fit, Dense Packing
Der Grid Auto-Placement-Algorithmus ist der Motor hinter responsiven Layouts ohne
Media-Queries. Claude Code nutzt auto-fill, auto-fit und
dense gezielt — und erklärt immer, warum er welches Keyword wählt.
AUTO auto-fill vs auto-fit — der entscheidende Unterschied
/* auto-fill: Erstellt leere Spalten wenn Platz vorhanden */
.gallery-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
/* → Bei 800px breitem Container: 4 Spalten à 200px
→ Leere Spalten am Ende bleiben als "Platzhalter" */
/* auto-fit: Kollabiert leere Spalten, Items strecken sich */
.gallery-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
/* → Bei nur 2 Items in einem 800px Container:
→ auto-fill: 2 Items + 2 leere Spalten = Items bleiben 200px
→ auto-fit: 2 Items strecken sich auf je 50% der Breite */
/* Faustregel von Claude Code:
- auto-fill = gleichmäßige Kacheln (z.B. Bild-Galerien)
- auto-fit = Items sollen verfügbaren Platz füllen */
AUTO Dense Packing — Lücken im Grid füllen
/* grid-auto-flow: dense füllt Lücken mit kleinen Items */
.masonry-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 120px;
grid-auto-flow: dense;
gap: 12px;
}
/* Große Feature-Karten spannen mehrere Zellen */
.card--featured {
grid-column: span 2;
grid-row: span 2;
}
.card--wide {
grid-column: span 2;
}
.card--tall {
grid-row: span 2;
}
/* Ohne "dense": Lücken entstehen nach großen Karten
Mit "dense": Browser füllt Lücken mit kleinen Items rückwärts
→ Visuell dichteres Layout ohne JavaScript */
/* Wichtig: dense ändert visuelle Reihenfolge!
Für Accessibility: Logische Reihenfolge im HTML beachten */
AUTO Span-Kombinationen für organische Layouts
/* Dynamische Span-Werte via CSS Custom Properties */
.dynamic-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(80px, auto);
gap: 16px;
}
/* Artikel-Varianten über Klassen oder Data-Attributes */
[data-size="full"] { grid-column: span 12; }
[data-size="half"] { grid-column: span 6; }
[data-size="third"] { grid-column: span 4; }
[data-size="quarter"]{ grid-column: span 3; }
/* Responsive: unter 768px immer volle Breite */
@media (max-width: 768px) {
[data-size] {
grid-column: span 12;
}
}
Claude Code Workflow: Beschreibe das gewünschte Layout-Verhalten in natürlicher
Sprache — "Karten sollen nebeneinander liegen und automatisch umbrechen, ohne Media-Query".
Claude Code wählt dann automatisch die optimale Kombination aus
auto-fit,
minmax() und gap.
4. Grid + CSS Custom Properties — Dynamische Spaltenanzahl & Fluid Typography
CSS Custom Properties und Grid-Layouts ergänzen sich perfekt: Custom Properties ermöglichen es, Grid-Konfigurationen dynamisch zu steuern — ohne Media-Queries oder JavaScript. Claude Code kombiniert beide Techniken für hochflexible Design-Systeme.
CUSTOM PROPS Dynamische Spaltenanzahl via Custom Properties
/* Spaltenanzahl als Custom Property — änderbar per JS oder :root */
:root {
--grid-cols: 3;
--grid-gap: 24px;
--grid-min-col: 240px;
}
.adaptive-grid {
display: grid;
grid-template-columns: repeat(
var(--grid-cols),
minmax(var(--grid-min-col), 1fr)
);
gap: var(--grid-gap);
}
/* Varianten per Modifier-Klassen */
.adaptive-grid--2col { --grid-cols: 2; }
.adaptive-grid--4col { --grid-cols: 4; }
.adaptive-grid--6col { --grid-cols: 6; --grid-gap: 12px; }
/* Responsive: Custom Property im Media-Query überschreiben */
@media (max-width: 1024px) {
.adaptive-grid { --grid-cols: 2; }
}
@media (max-width: 640px) {
.adaptive-grid { --grid-cols: 1; }
}
CUSTOM PROPS Fluid Typography im Grid-Context
/* Fluid Typography die sich am Grid orientiert */
:root {
/* Fluid Scale: min bei 320px, max bei 1440px */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
--text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
--text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
--text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
--text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
/* Spacing-Scale für Grid-Gap */
--space-sm: clamp(0.75rem, 0.5rem + 1vw, 1rem);
--space-md: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
--space-lg: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
--space-xl: clamp(2rem, 1.25rem + 3.75vw, 4rem);
}
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
padding: var(--space-xl) 0;
}
.content-grid h2 { font-size: var(--text-2xl); }
.content-grid p { font-size: var(--text-base); line-height: 1.7; }
Fluid Sizing Generator: Claude Code kann auf Anfrage
("Generiere eine komplette Fluid-Typography-Skala von xs bis 4xl") eine vollständige
clamp()-basierte Typografie-Skala für beliebige Breakpoints erstellen — inklusive
mathematisch korrekter linearer Interpolation zwischen den Extremwerten.
5. Container Queries + Grid — @container, cqi/cqb Einheiten
Container Queries sind der Game-Changer für komponentenbasiertes Design. Anstatt auf die Viewport-Breite zu reagieren, passen sich Elemente an ihren direkten Container an. In Kombination mit CSS Grid entstehen adaptive Layouts, die in jedem Kontext funktionieren.
CONTAINER Grundstruktur Container Query + Grid
/* 1. Container definieren (containment-context setzen) */
.card-wrapper {
container-type: inline-size; /* reagiert auf Breite */
container-name: card; /* optionaler Name */
}
/* 2. Kinder reagieren auf Container-Größe */
.card {
display: grid;
grid-template-areas: "image" "body";
grid-template-columns: 1fr;
}
/* Breiter Container: Karte wird horizontal */
@container card (min-width: 480px) {
.card {
grid-template-areas: "image body";
grid-template-columns: 200px 1fr;
}
}
/* Sehr breiter Container: Mehr Details sichtbar */
@container card (min-width: 720px) {
.card {
grid-template-areas: "image body meta";
grid-template-columns: 280px 1fr 180px;
}
.card-meta { display: block; } /* war vorher ausgeblendet */
}
/* Karte ist unabhängig von Viewport-Größe —
funktioniert in Sidebar, Haupt-Content, Modal, überall */
CONTAINER cqi/cqb Einheiten im Grid
/* cqi = 1% der inline-size des Containers (meist Breite)
cqb = 1% der block-size des Containers (meist Höhe)
cqmin/cqmax = kleinerer/größerer der beiden Werte */
.responsive-card {
container-type: size; /* für beide Achsen */
}
.responsive-card__title {
/* Schrift skaliert relativ zur Karten-Breite */
font-size: clamp(1rem, 4cqi, 2rem);
padding: 3cqi;
}
.responsive-card__image {
/* Bild-Höhe relativ zur Karten-Breite */
height: 50cqi;
object-fit: cover;
}
/* Container Query Style Queries (2025+) */
@container style(--card-style: featured) {
.card {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
grid-column: span 2;
}
}
CONTAINER Grid + Container Query — Dashboard-Widget
/* Dashboard: Widget passt sich seiner Spaltenbreite an */
.dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 16px;
padding: 24px;
}
.widget {
container-type: inline-size;
container-name: widget;
background: white;
border-radius: 12px;
border: 1px solid #e2e8f0;
overflow: hidden;
}
/* Schmales Widget (3-4 Spalten): Nur Kennzahl + Label */
.widget__chart { display: none; }
/* Mittleres Widget (5-8 Spalten): + Mini-Chart */
@container widget (min-width: 300px) {
.widget__chart {
display: block;
height: 80px;
}
}
/* Breites Widget (9-12 Spalten): Vollständige Ansicht */
@container widget (min-width: 500px) {
.widget__inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 16px;
}
.widget__chart { height: 120px; }
.widget__details { display: block; }
}
Container Queries vs. Media Queries: Verwende Media Queries für globale
Seiten-Layouts (Header, Footer, Sidebar-Position). Verwende Container Queries für
wiederverwendbare Komponenten (Karten, Widgets, Formular-Abschnitte). Claude Code folgt
dieser Konvention automatisch, wenn du das Einsatzgebiet der Komponente beschreibst.
6. Komplexe Real-World Layouts — Masonry, Magazine, Dashboard
Das Zusammenspiel aller Grid-Techniken zeigt sich in komplexen Real-World-Layouts. Claude Code generiert diese Layouts als vollständige, produktionsreife CSS-Blöcke — inklusive Fallbacks, Accessibility-Hinweisen und Performance-Tipps.
LAYOUT Masonry-ähnliches Grid (CSS-only)
/* Native CSS Masonry (2025 hinter Feature-Flag in Firefox/Chrome)
Fallback: grid-auto-flow: dense für ähnlichen Effekt */
/* Zukunft (wenn Masonry stable): */
.masonry-native {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-template-rows: masonry; /* CSS Masonry — noch nicht stable */
gap: 16px;
}
/* Heute (stabiler Ansatz mit dense): */
.masonry-today {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: 20px; /* kleine Basiszeile */
grid-auto-flow: dense;
gap: 4px 16px;
}
/* Item-Höhe via row-span — berechnet aus Inhaltshöhe */
.masonry-item {
/* grid-row: span N — N wird via ResizeObserver gesetzt:
N = Math.ceil((height + gap) / (rowHeight + gap)) */
padding: 16px;
border-radius: 8px;
background: white;
break-inside: avoid;
}
/* Alternativ: CSS Columns für simples Masonry */
.masonry-columns {
columns: 3 280px;
column-gap: 16px;
}
.masonry-columns > * {
break-inside: avoid;
margin-bottom: 16px;
}
LAYOUT Magazine-Layout — Redaktionelles Grid
/* Klassisches Magazin-Layout: Hero + mehrere Artikel-Slots */
.magazine {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, minmax(160px, auto));
gap: 4px;
max-width: 1200px;
margin: 0 auto;
}
/* Hero-Artikel: volle Breite, 2 Zeilen hoch */
.article--hero {
grid-column: 1 / 5;
grid-row: 1 / 3;
}
/* Sekundäre Artikel rechts */
.article--secondary-1 {
grid-column: 5 / 7;
grid-row: 1 / 2;
}
.article--secondary-2 {
grid-column: 5 / 7;
grid-row: 2 / 3;
}
/* Dritte Reihe: drei gleichbreite Artikel */
.article--tertiary-1 { grid-column: 1 / 3; grid-row: 3 / 5; }
.article--tertiary-2 { grid-column: 3 / 5; grid-row: 3 / 5; }
.article--tertiary-3 { grid-column: 5 / 7; grid-row: 3 / 5; }
/* Overlay-Technik für Text auf Bild */
.article {
position: relative;
overflow: hidden;
}
.article__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
hsl(0 0% 0% / 0.85) 0%,
hsl(0 0% 0% / 0.3) 50%,
transparent 100%
);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
color: white;
}
/* Responsive: Tablet */
@media (max-width: 900px) {
.magazine { grid-template-columns: repeat(4, 1fr); }
.article--hero { grid-column: 1 / 5; grid-row: 1 / 2; }
.article--secondary-1,
.article--secondary-2 { grid-column: span 2; grid-row: auto; }
}
/* Responsive: Mobile */
@media (max-width: 600px) {
.magazine { grid-template-columns: 1fr; }
[class^="article--"] { grid-column: 1; grid-row: auto; }
}
LAYOUT Dashboard Grid — vollständiges Admin-Panel
/* Full-Page Dashboard mit fixierter Sidebar */
.app-shell {
display: grid;
grid-template-areas:
"sidebar topbar"
"sidebar main";
grid-template-columns: 260px 1fr;
grid-template-rows: 64px 1fr;
height: 100svh; /* svh = stable viewport height */
overflow: hidden;
}
.sidebar {
grid-area: sidebar;
overflow-y: auto;
background: #1e293b;
color: white;
}
.topbar {
grid-area: topbar;
background: white;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
padding: 0 24px;
gap: 16px;
}
.main-area {
grid-area: main;
overflow-y: auto;
padding: 24px;
}
/* Inhalts-Grid im Main-Bereich */
.dashboard-content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
/* KPI-Karten: schmalere Spalten */
.kpi-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
/* Chart-Widget: nimmt 2 Spalten ein */
.widget--chart {
grid-column: span 2;
container-type: inline-size;
}
/* Tabellen-Widget: volle Breite */
.widget--table { grid-column: 1 / -1; }
/* Mobile: Sidebar als Drawer (overlay) */
@media (max-width: 768px) {
.app-shell {
grid-template-areas:
"topbar"
"main";
grid-template-columns: 1fr;
grid-template-rows: 64px 1fr;
}
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: 280px;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 100;
}
.sidebar.is-open {
transform: translateX(0);
}
.widget--chart { grid-column: span 1; }
}
LAYOUT Holy Grail Layout — modern & minimal
/* Holy Grail: Header, Footer, 3 Spalten — in 15 Zeilen CSS */
.holy-grail {
display: grid;
grid-template:
"header" auto
"nav content aside" 1fr
"footer" auto
/ 200px 1fr 200px; /* Kurzform: rows / columns */
min-height: 100svh;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: content; }
aside { grid-area: aside; }
footer { grid-area: footer; }
/* grid-template Kurzform: Zeilen-Track "areas" / Spalten-Tracks
— Spart 5 Zeilen verglichen mit separaten Eigenschaften */
/* Claude Code kommentiert immer die Kurzform-Schreibweise
um Verwirrung im Team zu vermeiden */
Performance-Tipp von Claude Code: Für animierte Grid-Layouts (z.B. ausklappende
Panels) niemals
grid-template-columns animieren — das triggert Layout-Berechnungen.
Stattdessen: Panel als Grid-Item mit overflow: hidden und max-width/max-height
animieren, oder scale() via transform nutzen — keine Layout-Kosten.
LAYOUT CSS Grid Cheat Sheet — Quick Reference
Container-Properties:
display: grid | inline-grid
grid-template-columns: repeat(3, 1fr) | 200px 1fr | minmax(200px, 1fr)
grid-template-rows: auto | 1fr | minmax(100px, auto)
grid-template-areas: "a b" "c c"
grid-template: "a b" auto "c c" 1fr / 200px 1fr ← Kurzform
grid-auto-columns: 1fr | minmax(100px, 1fr)
grid-auto-rows: 100px | minmax(80px, auto)
grid-auto-flow: row | column | dense | row dense
gap: 16px | 16px 24px (row col)
align-items: start | end | center | stretch
justify-items: start | end | center | stretch
place-items: center (= both)
align-content: start | end | center | space-between | space-around
justify-content: start | end | center | space-between | space-around
Item-Properties:
grid-column: 1 / 3 | span 2 | 1 / -1
grid-row: 1 / 3 | span 2 | auto
grid-area: header | 1 / 1 / 3 / 3
align-self: start | end | center | stretch
justify-self: start | end | center | stretch
place-self: center (= both)
order: 1 | -1 | 0 (default)
Funktionen:
repeat(3, 1fr) | repeat(auto-fill, 200px) | repeat(auto-fit, 200px)
minmax(200px, 1fr) | minmax(0, 1fr) | minmax(auto, 1fr)
fit-content(300px) | max-content | min-content
CSS-Modul im Kurs
Im Claude Code Mastery Kurs: CSS Grid, Flexbox, Container Queries, CSS Custom Properties und moderne Layout-Patterns — ohne Tailwind-Abhängigkeit, rein mit CSS.
14 Tage kostenlos testen →