Comprendre le CSS Grid Layout

Introduction au CSS Grid

CSS Grid Layout est un système de mise en page bidimensionnel. Il organise le contenu en lignes et en colonnes et simplifie énormément la construction de mises en page complexes.

Concepts de base

• Conteneur de grille : l'élément sur lequel on applique display: grid.
• Éléments de grille : les enfants directs du conteneur.
• Lignes de grille : les séparations horizontales et verticales.
• Pistes : l'espace entre deux lignes adjacentes (une ligne ou une colonne).
• Cellule : l'intersection d'une ligne et d'une colonne.
• Zone : un rectangle composé d'une ou plusieurs cellules.

Créer une grille simple

Une grille de trois colonnes et deux lignes :

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

L'unité fr représente une fraction de l'espace disponible : 1fr 1fr 1fr crée donc trois colonnes de même largeur.

Placer les éléments

On positionne les éléments avec grid-column et grid-row :

.item1 {
  grid-column: 1 / 3; /* de la ligne 1 à la ligne 3 */
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3; /* sur deux lignes */
}