CSS Grid avec Claude Code

Implémenter des mises en page complexes simplement avec CSS Grid

CSS Grid est au coeur de la conception de mises en page modernes. Avec Claude Code, vous pouvez générer rapidement et avec précision le code de mises en page grid complexes.

Mise en page grid de base

> Crée une mise en page tableau de bord avec CSS Grid.
> Avec 4 zones : en-tête, barre latérale, contenu principal et pied de page.

/* Mise en page tableau de bord */
.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; }

/* Responsive : 1 colonne sur mobile */
@media (width < 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr 40px;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }
}

Mise en page automatique avec auto-fill / auto-fit

/* Grille de cartes : ajustement automatique du nombre de colonnes */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* auto-fit : étirement quand il y a peu d'éléments */
.stretch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Point de comparaison :
   auto-fill → maintient les pistes vides (largeur d'élément fixe)
   auto-fit  → réduit les pistes vides (les éléments s'étirent) */

Mise en page magazine

/* Grille irrégulière style magazine */
.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;
}

Utilisation de Subgrid

/* Aligner les éléments internes des cartes avec Subgrid */
.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; /* 3 lignes : titre, corps, pied */
}

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

Mises en page avancées avec lignes nommées

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

Animation CSS Grid

/* Transition animée de la grille */
.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;
}

Classes utilitaires pratiques

/* Utilitaires grid */
.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; }

Résumé

En distinguant l’usage de CSS Grid et Flexbox, vous pouvez gérer toutes les mises en page. Avec Claude Code, vous pouvez implémenter avec précision les fonctionnalités avancées comme subgrid et les lignes nommées. N’oubliez pas de combiner avec les media queries pour le responsive. Pour les spécifications détaillées de CSS Grid, consultez CSS Grid Layout Module Level 2.