Maitriser CSS Grid avec Claude Code

Utiliser CSS Grid comme plan de page

CSS Grid est un système de mise en page en deux dimensions. Flexbox reste souvent meilleur pour une ligne ou une colonne à l’intérieur d’un composant; Grid est plus adapté à la structure d’une page: header, sidebar, contenu, footer, cartes, pricing et blocs CTA.

Le vocabulaire de base est simple. Le conteneur grid est l’élément avec display: grid. Les grid items sont ses enfants directs. Une track est une ligne ou une colonne. grid-template-areas donne des noms lisibles aux zones. minmax() fixe une taille minimale et maximale. auto-fit crée autant de colonnes que possible et étire les cartes restantes.

À lire avec responsive design, patterns Flexbox, variables CSS et accessibilité. Références officielles: MDN CSS Grid Layout, grid-template-areas, minmax() et repeat().

Bien cadrer Claude Code

Ne demandez pas seulement “rends-le responsive”. Donnez les zones, les largeurs minimales, les tailles d’écran à vérifier et les contraintes business. Pour un site de contenu, le CTA, les blocs de code, les publicités et le texte ne doivent pas déborder à 360px.

Besoin	Instruction pour Claude Code	Intérêt
Zones	header, sidebar, main, footer, cta	grid-template-areas lisibles
Minimums	cartes à 280px, texte autour de 65ch	texte non écrasé
Fluidité	auto-fit et minmax()	moins de breakpoints fragiles
Vérification	360, 768, 1024, 1440px	détection d’overflow réel
Monétisation	CTA et liens produit visibles	protection du parcours revenu

HTML prêt à copier

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

  <aside class="sidebar" aria-label="Sections">
    <a href="#cards">Cartes</a>
    <a href="#pitfalls">Pièges</a>
    <a href="#cta">CTA</a>
  </aside>

  <main class="content">
    <section class="hero-panel">
      <p class="eyebrow">CSS Grid guide</p>
      <h1>Layouts stables pour articles et dashboards</h1>
      <p>Named areas, minmax et auto-fit gardent la même structure HTML sur plusieurs largeurs.</p>
    </section>

    <section id="cards" class="card-grid" aria-label="Use cases">
      <article class="card">
        <h2>Archive d'articles</h2>
        <p>Les cartes restent lisibles et le nombre de colonnes s'adapte.</p>
        <a href="/fr/blog/claude-code-css-grid-mastery">Checklist</a>
      </article>
      <article class="card">
        <h2>Pricing</h2>
        <p>Les CTA restent alignés pour faciliter la comparaison.</p>
        <a href="/en/products/">Voir les templates</a>
      </article>
      <article class="card">
        <h2>Dashboard</h2>
        <p>Les zones nommées clarifient l'ordre mobile.</p>
        <a href="/en/training/">Discuter du rollout</a>
      </article>
    </section>
  </main>

  <footer class="site-footer" id="cta">
    <p>Pour l'adapter à votre repo: <a href="/en/training/">formation et conseil Claude Code</a>.</p>
  </footer>
</div>

CSS avec grid-template-areas, minmax et 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;
}

min-width: 0 évite qu’une URL longue, un tableau ou un bloc de code force la colonne à dépasser le viewport. Pour des cartes éditoriales ou pricing, auto-fit est souvent plus utile que auto-fill, car les colonnes vides se replient.

Composant Astro

---
const items = [
  { title: "Responsive design", body: "Vérifier plusieurs viewports avant publication.", href: "/fr/blog/claude-code-responsive-design" },
  { title: "Patterns Flexbox", body: "Utiliser Flexbox dans les petits contrôles à une dimension.", href: "/fr/blog/claude-code-flexbox-patterns" },
  { title: "Variables CSS", body: "Transformer espacements et tailles en tokens.", href: "/fr/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}>Lire le 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>

Cartes React / TSX

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

const resources: ResourceCard[] = [
  {
    title: "Review CSS Grid",
    description: "Contrôler areas, minmax, overflow et cartes mobiles.",
    href: "/fr/blog/claude-code-css-grid-mastery",
    cta: "Checklist"
  },
  {
    title: "Claude Code training",
    description: "Transformer prompts, règles de review et vérification en workflow d'équipe.",
    href: "/en/training/",
    cta: "Conseil"
  },
  {
    title: "Templates",
    description: "Démarrer avec CLAUDE.md et prompts de review réutilisables.",
    href: "/en/products/",
    cta: "Produits"
  }
];

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

Cas d’usage et pièges

Premier cas: archive d’articles avec titres de longueurs différentes. auto-fit + minmax() évite une CSS fragile par breakpoint. Deuxième cas: page pricing, où le CTA doit rester visible. Troisième cas: dashboard interne avec sidebar, filtres et tableau. Quatrième cas: galerie média, où aspect-ratio limite les sauts au chargement des images.

Les pièges courants sont les trois colonnes fixes sur mobile, l’oubli de min-width: 0, les noms d’area incohérents et l’usage de Grid pour chaque petit alignement. Utilisez Grid pour la structure, Flexbox dans les boutons, la navigation et les petits contrôles.

Après l’implémentation, demandez à Claude Code de vérifier overflow horizontal, visibilité du CTA, scroll des blocs de code, navigation clavier et validité des liens internes. Pour un contenu monétisé, vérifiez aussi les liens produit et conseil sur mobile. Claude Code training et les template products aident à transformer cette revue en processus répétable.

Conclusion

Un bon CSS Grid ne consiste pas à utiliser toutes les propriétés. Utilisez grid-template-areas pour la lisibilité, minmax() pour protéger les tailles minimales et auto-fit pour les cartes responsives. Avec des contraintes claires, Claude Code peut générer et relire des layouts qui résistent au vrai contenu.