CSS Grid Mastery with Claude Code

Treat CSS Grid as the Page Blueprint

CSS Grid is a two-dimensional layout system. Flexbox is usually better for one row or one column inside a component, while Grid is better for page structure: header, sidebar, content, footer, pricing cards, article cards, and CTA blocks.

The beginner-friendly mental model is simple. A grid container is the parent with display: grid. Grid items are its direct children. A track is a row or column. grid-template-areas gives layout regions readable names. minmax() sets a lower and upper size. auto-fit creates as many tracks as fit and stretches the remaining items.

Claude Code is useful when you give it constraints, not when you only say “make it responsive.” Pair this guide with responsive design, Flexbox patterns, CSS variables, and accessibility. Keep the official references open: MDN CSS Grid Layout, grid-template-areas, minmax(), and repeat().

What to Ask Claude Code For

Give Claude Code the layout regions, minimum widths, breakpoints, and business constraints before asking for code. For a content site, say that the CTA, code blocks, ads, and article body must not overflow at 360px. For an admin app, say which panels can collapse and which table must scroll.

Need	Tell Claude Code	Why it matters
Areas	header, sidebar, main, footer, cta	Keeps grid-template-areas readable
Minimums	cards at 280px, content near 65ch	Prevents crushed text
Fluid rules	use auto-fit and minmax()	Reduces breakpoint sprawl
Verification	360, 768, 1024, 1440px	Finds real overflow
Revenue path	CTA and product links stay visible	Protects monetization

Copy-Paste HTML

<div class="dashboard-shell">
  <header class="site-header">
    <a class="brand" href="/">ClaudeCodeLab</a>
    <nav class="top-nav" aria-label="Primary">
      <a href="/en/blog/claude-code-responsive-design">Responsive</a>
      <a href="/en/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">Pitfalls</a>
    <a href="#cta">CTA</a>
  </aside>

  <main class="content">
    <section class="hero-panel">
      <p class="eyebrow">CSS Grid guide</p>
      <h1>Reliable layouts for articles and dashboards</h1>
      <p>Use named areas, minmax, and auto-fit to keep one HTML structure working across viewport sizes.</p>
    </section>

    <section id="cards" class="card-grid" aria-label="Use cases">
      <article class="card">
        <h2>Article archive</h2>
        <p>Keep cards readable and let the column count adapt.</p>
        <a href="/en/blog/claude-code-css-grid-mastery">Read checklist</a>
      </article>
      <article class="card">
        <h2>Pricing page</h2>
        <p>Align CTAs so users can compare plans quickly.</p>
        <a href="/en/products/">See templates</a>
      </article>
      <article class="card">
        <h2>Admin dashboard</h2>
        <p>Name layout regions so mobile ordering stays obvious.</p>
        <a href="/en/training/">Discuss rollout</a>
      </article>
    </section>
  </main>

  <footer class="site-footer" id="cta">
    <p>Need this adapted to your repo? See <a href="/en/training/">Claude Code training and consultation</a>.</p>
  </footer>
</div>

Named Areas for the Shell

.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;
  }
}

The min-width: 0 on .content is not decorative. Without it, long URLs, tables, and code blocks can force a grid item wider than the viewport. Ask Claude Code to check every grid item that contains user-generated content, tables, or code snippets.

Responsive Cards with minmax and auto-fit

.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;
  background: #fff;
}

.card h2,
.card p {
  margin: 0;
}

.card a {
  justify-self: start;
}

Use auto-fit when a small number of cards should stretch to fill the row. Use auto-fill when empty tracks still represent something, such as calendar cells or inventory slots. This distinction is a common review comment because both values appear to work in the first screenshot.

Astro Component

---
const items = [
  { title: "Responsive design", body: "Use viewport checks before shipping.", href: "/en/blog/claude-code-responsive-design" },
  { title: "Flexbox patterns", body: "Use Flexbox inside small one-direction controls.", href: "/en/blog/claude-code-flexbox-patterns" },
  { title: "CSS variables", body: "Tokenize spacing and card sizes.", href: "/en/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}>Read guide</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 Cards

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

const resources: ResourceCard[] = [
  {
    title: "CSS Grid review",
    description: "Check named areas, minmax rules, overflow, and mobile card behavior.",
    href: "/en/blog/claude-code-css-grid-mastery",
    cta: "Review checklist"
  },
  {
    title: "Claude Code training",
    description: "Turn layout prompts, review rules, and verification into a team workflow.",
    href: "/en/training/",
    cta: "Consult training"
  },
  {
    title: "Template products",
    description: "Start with reusable CLAUDE.md and review prompts.",
    href: "/en/products/",
    cta: "See products"
  }
];

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>
  );
}

Use Cases and Pitfalls

Use case one is an article archive. Cards have mixed title lengths, tags, and reading times, so auto-fit + minmax() avoids brittle breakpoint-only CSS. Use case two is a pricing page. The CTA must align and stay visible because it affects revenue. Use case three is an admin dashboard. Named areas make it obvious how the sidebar and main panel reflow on mobile. A fourth useful case is a media gallery, where aspect-ratio can prevent layout shift when images load.

The main pitfalls are fixed three-column grids on mobile, missing min-width: 0, mismatched area names, and using Grid for every tiny alignment problem. Use Grid for the page or card collection. Use Flexbox inside buttons, nav rows, and small controls.

After Claude Code edits the layout, ask for a review that checks horizontal overflow, CTA visibility, code block scrolling, keyboard navigation, and internal link validity. For monetized content, also verify that product and consultation links are still visible on mobile. ClaudeCodeLab’s training and consultation can help teams turn this into a repeatable review workflow, and the template products are useful when you want CLAUDE.md rules and review prompts ready before refactoring layouts.

Summary

Practical CSS Grid work is not about using every property. Use grid-template-areas to make structure readable, minmax() to protect minimum sizes, and auto-fit for responsive cards. Then let Claude Code implement and review against concrete viewport widths and business constraints. That combination produces layouts that survive real content, not just clean demo screenshots.

Extra Production Review

Before publishing, ask Claude Code to compare the implementation against mobile width, keyboard use, long labels, ad slots, code blocks, and the main conversion path. The change is only successful when it improves maintainability without hiding the business action the page is supposed to drive.