CSS Grid mit Claude Code

Komplexe Layouts einfach mit CSS Grid implementieren

CSS Grid ist das Herzstück moderner Layout-Gestaltung. Mit Claude Code können Sie komplexen Grid-Layout-Code schnell und präzise generieren.

Grundlegendes Grid-Layout

> Erstelle ein Dashboard-Layout mit CSS Grid.
> Mit Header, Sidebar, Hauptinhalt und Footer als 4 Bereiche.

/* Dashboard-Layout */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Responsiv: eine Spalte auf Mobilgeräten */
@media (width < 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr 40px;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }
}

Automatisches Layout mit auto-fill / auto-fit

/* Karten-Grid: Spaltenanzahl automatisch anpassen */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* auto-fit: Strecken bei wenigen Elementen */
.stretch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Vergleichspunkt:
   auto-fill → leere Tracks beibehalten (Elementbreite fest)
   auto-fit  → leere Tracks kollabieren (Elemente dehnen sich) */

Magazin-Layout

/* Unregelmäßiges Grid im Magazin-Stil */
.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}

.magazine .featured {
  grid-column: span 2;
  grid-row: span 2;
}

.magazine .wide {
  grid-column: span 2;
}

.magazine .tall {
  grid-row: span 2;
}

Subgrid nutzen

/* Subgrid zum Ausrichten von Elementen innerhalb von Karten */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* Titel, Text, Footer - 3 Zeilen */
}

.card__title {
  align-self: start;
  font-size: 1.25rem;
  font-weight: bold;
}

.card__body {
  align-self: start;
}

.card__footer {
  align-self: end;
  border-top: 1px solid #eee;
  padding-top: 0.5rem;
}

Fortgeschrittenes Layout mit benannten Linien

.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(65ch, 100%)
    [content-end] minmax(1rem, 1fr)
    [full-end];
}

.page > * {
  grid-column: content;
}

.page .full-bleed {
  grid-column: full;
}

.page .wide {
  grid-column: full;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

CSS Grid-Animation

/* Animierte Grid-Übergänge */
.animated-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.3s ease;
}

.animated-grid.collapsed {
  grid-template-columns: 0fr 1fr;
}

.animated-grid .sidebar {
  overflow: hidden;
  min-width: 0;
}

Praktische Utility-Klassen

/* Grid-Utilities */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-full { grid-column: 1 / -1; }

Zusammenfassung

CSS Grid kann in Kombination mit Flexbox jedes Layout abdecken. Mit Claude Code können auch fortgeschrittene Funktionen wie Subgrid und benannte Linien präzise implementiert werden. Vergessen Sie nicht die responsive Anpassung in Kombination mit Media Queries. Die detaillierte Spezifikation von CSS Grid finden Sie unter CSS Grid Layout Module Level 2.