Claude Code के साथ CSS Grid Mastery

CSS Grid को page blueprint की तरह सोचें

CSS Grid दो दिशाओं में layout बनाने की CSS capability है। Flexbox एक row या column के अंदर alignment के लिए अच्छा है, लेकिन पूरी page structure जैसे header, sidebar, main content, footer, card list, pricing और CTA blocks के लिए Grid ज्यादा साफ रहता है।

Beginner terms पहले clear करें। Grid container वह parent है जिस पर display: grid लगता है। Grid items उसके direct children होते हैं। Track का मतलब row या column है। grid-template-areas layout regions को readable नाम देता है। minmax() minimum और maximum size साथ में देता है। auto-fit जितनी columns fit हो सकती हैं उतनी बनाता है और available space cards में बांटता है।

Related guides: responsive design, Flexbox patterns, CSS variables, और accessibility. Official references: MDN CSS Grid Layout, grid-template-areas, minmax(), और repeat().

Claude Code को सही context दें

सिर्फ “responsive बना दो” मत लिखें। Areas, minimum width, test viewports और business constraints साफ दें। Content site में CTA, code blocks, ads और article text 360px width पर overflow नहीं होने चाहिए।

जरूरत	Claude Code को बताएं	कारण
Areas	header, sidebar, main, footer, cta	grid-template-areas readable रहती हैं
Minimums	cards 280px, text लगभग 65ch	text crush नहीं होता
Fluid rules	auto-fit और minmax()	breakpoints कम होते हैं
Verification	360, 768, 1024, 1440px	real overflow मिलता है
Monetization	CTA और product links visible रहें	conversion path सुरक्षित रहता है

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="/hi/blog/claude-code-responsive-design">Responsive</a>
      <a href="/hi/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>Articles और dashboards के लिए stable layouts</h1>
      <p>Named areas, minmax और auto-fit से वही HTML कई viewport sizes पर काम करता है।</p>
    </section>

    <section id="cards" class="card-grid" aria-label="Use cases">
      <article class="card">
        <h2>Article archive</h2>
        <p>Cards readable रहती हैं और column count अपने आप बदलता है।</p>
        <a href="/hi/blog/claude-code-css-grid-mastery">Checklist</a>
      </article>
      <article class="card">
        <h2>Pricing page</h2>
        <p>CTA buttons aligned रहते हैं ताकि comparison आसान हो।</p>
        <a href="/en/products/">Templates देखें</a>
      </article>
      <article class="card">
        <h2>Admin dashboard</h2>
        <p>Named areas mobile order को साफ बनाते हैं।</p>
        <a href="/en/training/">Rollout discuss करें</a>
      </article>
    </section>
  </main>

  <footer class="site-footer" id="cta">
    <p>Repo-specific setup के लिए <a href="/en/training/">Claude Code training और consultation</a> देखें।</p>
  </footer>
</div>

grid-template-areas, minmax और auto-fit

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

.content { min-width: 0; } बहुत जरूरी है। Long URL, table या code block Grid item को viewport से बाहर धकेल सकता है। Article cards और pricing cards के लिए auto-fit अक्सर auto-fill से बेहतर है, क्योंकि empty tracks collapse हो जाते हैं और existing cards space लेती हैं।

Astro component

---
const items = [
  { title: "Responsive design", body: "Publish से पहले कई viewport widths देखें।", href: "/hi/blog/claude-code-responsive-design" },
  { title: "Flexbox patterns", body: "छोटे one-direction controls में Flexbox use करें।", href: "/hi/blog/claude-code-flexbox-patterns" },
  { title: "CSS variables", body: "Spacing और card width को tokens बनाएं।", href: "/hi/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 पढ़ें</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: "Areas, minmax, overflow और mobile cards check करें।",
    href: "/hi/blog/claude-code-css-grid-mastery",
    cta: "Checklist"
  },
  {
    title: "Claude Code training",
    description: "Prompts, review rules और verification को team workflow बनाएं।",
    href: "/en/training/",
    cta: "Consult"
  },
  {
    title: "Template products",
    description: "Reusable CLAUDE.md और review prompts से शुरुआत करें।",
    href: "/en/products/",
    cta: "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 और pitfalls

पहला use case article archive है, जहां titles और tags की length अलग होती है। auto-fit + minmax() brittle breakpoint CSS से बचाता है। दूसरा use case pricing page है, जहां CTA visible रहना revenue के लिए जरूरी है। तीसरा use case admin dashboard है, जिसमें sidebar, filters और table को named areas से manage किया जा सकता है। चौथा use case media gallery है, जहां aspect-ratio image loading के layout shifts कम करता है।

Common pitfalls हैं: mobile पर fixed three-column grid, min-width: 0 भूलना, area names mismatch करना, और हर छोटी alignment के लिए Grid use करना। Page structure और card collection के लिए Grid रखें; buttons, nav rows और छोटे controls के अंदर Flexbox use करें।

Implementation के बाद Claude Code से review कराएं: horizontal overflow, CTA visibility, code block scrolling, keyboard navigation और internal links। Monetized content में product और consultation links mobile पर visible हैं या नहीं, यह भी check करें। Repeatable workflow चाहिए तो Claude Code training और template products उपयोगी हैं।

Summary

Practical CSS Grid का मतलब हर property use करना नहीं है। Structure पढ़ने योग्य बनाने के लिए grid-template-areas, minimum size बचाने के लिए minmax(), और responsive cards के लिए auto-fit use करें। Clear constraints देने पर Claude Code ऐसा layout बना और review कर सकता है जो real content में भी stable रहे।