Comprendre le CSS Grid Layout

Introduction au CSS Grid

CSS Grid Layout est un système de mise en page bidimensionnel conçu pour le web. Il vous permet d'organiser le contenu en lignes et en colonnes et possède de nombreuses fonctionnalités qui facilitent la construction de mises en page complexes.

Concepts de base

Pour commencer avec CSS Grid, vous devez comprendre quelques concepts clés:

• Conteneur de grille: L'élément sur lequel display: grid est appliqué.
• Éléments de grille: Les enfants du conteneur de grille.
• Lignes de grille: Les lignes horizontales et verticales qui divisent la grille.
• Pistes de grille: L'espace entre deux lignes de grille adjacentes (lignes ou colonnes).
• Cellule de grille: L'intersection d'une ligne et d'une colonne.
• Zone de grille: Une zone rectangulaire sur la grille contenant une ou plusieurs cellules de grille.

Création d'une grille de base

Commençons par créer une grille simple avec trois colonnes et deux lignes:

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

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

Dans cet exemple, nous utilisons l'unité fr, qui représente une fraction de l'espace disponible. Ainsi, 1fr 1fr 1fr crée trois colonnes de largeur égale.

Placement des éléments sur la grille

Vous pouvez placer des éléments sur la grille en utilisant les propriétés grid-column et grid-row:

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

.item2 {
  grid-column: 3 / 4; /* Commence à la ligne 3, termine à la ligne 4 */
  grid-row: 1 / 3; /* Commence à la ligne 1, termine à la ligne 3 */
}