CSS Grid mit Claude Code meistern

CSS Grid als Bauplan der Seite nutzen

CSS Grid ist ein zweidimensionales Layoutsystem. Flexbox passt gut für eine Zeile oder Spalte innerhalb einer Komponente; Grid passt besser für die Struktur einer Seite: Header, Sidebar, Content, Footer, Kartenlisten, Pricing und CTA-Bereiche.

Die wichtigsten Begriffe sind einfach: Der Grid-Container ist das Element mit display: grid. Grid-Items sind seine direkten Kinder. Tracks sind Spalten oder Zeilen. grid-template-areas benennt Bereiche lesbar. minmax() setzt eine Mindest- und Maximalgröße. auto-fit erzeugt so viele Spalten wie passen und dehnt vorhandene Karten.

Lies dazu auch Responsive Design, Flexbox Patterns, CSS Variables und Accessibility. Offizielle Referenzen: MDN CSS Grid Layout, grid-template-areas, minmax() und repeat().

Claude Code richtig briefen

Bitte Claude Code nicht nur um “ein responsives Layout”. Gib Bereiche, Mindestbreiten, Viewports und Geschäftsziele an. Für ein Content-Projekt heißt das zum Beispiel: CTA, Codeblöcke, Anzeigen und Artikeltext dürfen bei 360px Breite nicht überlaufen.

Bedarf	Vorgabe an Claude Code	Nutzen
Bereiche	header, sidebar, main, footer, cta	stabile grid-template-areas
Mindestbreite	Karten 280px, Text etwa 65ch	Text bleibt lesbar
Fluides Verhalten	auto-fit und minmax()	weniger Breakpoint-Sonderfälle
Prüfung	360, 768, 1024, 1440px	echte Überläufe finden
Monetarisierung	CTA und Produktlinks sichtbar halten	Umsatzpfad schützen

Kopierbares HTML

<div class="dashboard-shell">
  <header class="site-header">
    <a class="brand" href="/">ClaudeCodeLab</a>
    <nav class="top-nav" aria-label="Primary">
      <a href="/de/blog/claude-code-responsive-design">Responsive</a>
      <a href="/de/blog/claude-code-flexbox-patterns">Flexbox</a>
      <a href="/en/training/">Training</a>
    </nav>
  </header>

  <aside class="sidebar" aria-label="Sections">
    <a href="#cards">Cards</a>
    <a href="#pitfalls">Fehler</a>
    <a href="#cta">CTA</a>
  </aside>

  <main class="content">
    <section class="hero-panel">
      <p class="eyebrow">CSS Grid Guide</p>
      <h1>Stabile Layouts für Artikel und Dashboards</h1>
      <p>Named areas, minmax und auto-fit halten dieselbe HTML-Struktur über viele Breiten stabil.</p>
    </section>

    <section id="cards" class="card-grid" aria-label="Use cases">
      <article class="card">
        <h2>Artikelarchiv</h2>
        <p>Karten bleiben lesbar und die Spaltenzahl passt sich automatisch an.</p>
        <a href="/de/blog/claude-code-css-grid-mastery">Checkliste</a>
      </article>
      <article class="card">
        <h2>Pricing</h2>
        <p>CTAs stehen sauber untereinander, damit Pläne vergleichbar bleiben.</p>
        <a href="/en/products/">Templates ansehen</a>
      </article>
      <article class="card">
        <h2>Dashboard</h2>
        <p>Benannte Bereiche machen mobile Umordnung nachvollziehbar.</p>
        <a href="/en/training/">Rollout besprechen</a>
      </article>
    </section>
  </main>

  <footer class="site-footer" id="cta">
    <p>Für Repo-spezifische Umsetzung: <a href="/en/training/">Claude Code Training und Beratung</a>.</p>
  </footer>
</div>

Layout mit grid-template-areas

.dashboard-shell {
  --page-gap: clamp(1rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: var(--page-gap);
  min-height: 100svh;
  padding: var(--page-gap);
}

.site-header { grid-area: header; }
.sidebar { grid-area: sidebar; align-self: start; position: sticky; top: 1rem; }
.content { grid-area: content; min-width: 0; }
.site-footer { grid-area: footer; border-top: 1px solid #d7dee8; padding-block-start: 1rem; }

@media (width < 768px) {
  .dashboard-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }

  .sidebar { position: static; }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  min-width: 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 1rem;
}

min-width: 0 ist wichtig. Ohne diese Zeile können lange URLs, Tabellen oder Codeblöcke den Grid-Bereich breiter als den Viewport machen. auto-fit ist für Kartenlisten meist praktischer als auto-fill, weil leere Tracks zusammenfallen und vorhandene Karten den Platz nutzen.

Astro-Komponente

---
const items = [
  { title: "Responsive Design", body: "Vor dem Release mehrere Viewports prüfen.", href: "/de/blog/claude-code-responsive-design" },
  { title: "Flexbox Patterns", body: "Flexbox in kleinen eindimensionalen Komponenten nutzen.", href: "/de/blog/claude-code-flexbox-patterns" },
  { title: "CSS Variables", body: "Abstände und Kartenbreiten als Tokens pflegen.", href: "/de/blog/claude-code-css-variables" }
];
---

<section class="related-grid" aria-label="Related guides">
  {items.map((item) => (
    <article class="related-card">
      <h2>{item.title}</h2>
      <p>{item.body}</p>
      <a href={item.href}>Guide lesen</a>
    </article>
  ))}
</section>

<style>
  .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
  }

  .related-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    padding: 1rem;
  }
</style>

React / TSX-Karten

type ResourceCard = {
  title: string;
  description: string;
  href: string;
  cta: string;
};

const resources: ResourceCard[] = [
  {
    title: "CSS Grid Review",
    description: "Prüft Areas, minmax, Overflow und mobile Karten.",
    href: "/de/blog/claude-code-css-grid-mastery",
    cta: "Checkliste"
  },
  {
    title: "Claude Code Training",
    description: "Prompts, Review-Regeln und Verifikation als Teamworkflow.",
    href: "/en/training/",
    cta: "Beratung"
  },
  {
    title: "Template-Produkte",
    description: "Mit CLAUDE.md und Review-Prompts schneller starten.",
    href: "/en/products/",
    cta: "Produkte"
  }
];

export function ResourceGrid() {
  return (
    <section className="resource-grid" aria-label="CSS Grid resources">
      {resources.map((resource) => (
        <article className="resource-card" key={resource.href}>
          <h2>{resource.title}</h2>
          <p>{resource.description}</p>
          <a href={resource.href}>{resource.cta}</a>
        </article>
      ))}
    </section>
  );
}

Anwendungsfälle und Fehler

Erster Anwendungsfall: Artikelarchive mit unterschiedlich langen Titeln. auto-fit + minmax() verhindert zerbrechliche Breakpoint-Logik. Zweiter Fall: Pricing-Seiten, bei denen CTA-Buttons auf Mobilgeräten sichtbar und vergleichbar bleiben müssen. Dritter Fall: Admin-Dashboards mit Sidebar, Filterbereich und Tabelle. Ein vierter Fall ist eine Galerie, bei der aspect-ratio Layoutsprünge reduziert.

Typische Fehler sind fixe drei Spalten auf Mobilgeräten, fehlendes min-width: 0, falsch geschriebene Area-Namen und Grid für jede kleine Innenausrichtung. Nutze Grid für die Seitenstruktur und Flexbox innerhalb von Buttons, Navigation und kleinen Controls.

Lass Claude Code nach der Implementierung gezielt prüfen: horizontaler Overflow, CTA-Sichtbarkeit, Codeblock-Scrollen, Tastaturbedienung und interne Links. Für monetarisierte Inhalte sollten Produkt- und Beratungslinks auf Mobilgeräten sichtbar bleiben. Für wiederholbare Teamprozesse helfen Claude Code Training und die Template-Produkte.

Fazit

Gutes CSS Grid heißt nicht, jede Grid-Eigenschaft zu nutzen. Nutze grid-template-areas für Lesbarkeit, minmax() für Mindestgrößen und auto-fit für responsive Karten. Mit klaren Constraints und Review-Aufgaben kann Claude Code Layouts erzeugen, die echte Inhalte besser überstehen als reine Demo-Screenshots.