Grid : colonnes, lignes, zones

Construisez des galeries et des gabarits de page complets avec les colonnes, les lignes et les zones nommées de CSS Grid.

9 min · 3 questions

Flexbox aligne sur un axe ; Grid contrôle les deux à la fois. Dès que votre maquette ressemble à un tableau - galerie de photos, tableau de bord, page complète avec en-tête, barre latérale et pied de page - Grid est le bon outil. Le conteneur définit la structure en colonnes et en lignes, et les enfants s'y placent automatiquement ou à l'endroit exact que vous choisissez.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

L'unité fr (fraction) partage l'espace disponible : 1fr 2fr crée deux colonnes dont la seconde est deux fois plus large. Contrairement aux pourcentages, fr tient compte du gap sans aucun calcul de votre part. Pour mettre en avant un élément, faites-le s'étendre sur plusieurs pistes avec grid-column et grid-row.

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

Pour une page entière, grid-template-areas vous permet de dessiner la maquette directement dans le CSS. Chaque chaîne représente une ligne de la grille, chaque mot une zone nommée. Un enfant se place ensuite avec grid-area. Le résultat se lit comme un plan d'architecte : c'est la méthode la plus lisible pour un gabarit de page.

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.site-header { grid-area: header; }
.site-nav { grid-area: sidebar; }
.site-main { grid-area: main; }
.site-footer { grid-area: footer; }

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Que représente l'unité fr dans grid-template-columns: 1fr 2fr ?
   • Une fraction de l'espace disponible du conteneur
   • Un pourcentage de la largeur de l'écran
   • Une taille fixe exprimée en pixels
2. Quelle déclaration crée trois colonnes de largeur égale ?
   • grid-template-columns: 3
   • grid-template-columns: repeat(3, 1fr)
   • grid-columns: 1fr 3
3. À quoi sert grid-template-areas ?
   • À nommer des zones de la grille où les enfants se placent via grid-area
   • À définir la taille des colonnes de la grille
   • À créer des animations entre les cellules