5 astuces CSS Grid pour des layouts responsives

5 astuces CSS Grid pour des layouts responsives

Introduction

Après avoir vu Flexbox, il est temps de découvrir un autre outil incontournable du CSS moderne : CSS Grid.
Alors que Flexbox est idéal pour organiser des éléments dans une seule dimension (ligne ou colonne), CSS Grid permet de créer des layouts complets en 2D (lignes et colonnes).

👉 Dans cet article, je vais partager 5 astuces pratiques pour utiliser CSS Grid et créer des mises en page responsives et modernes.

1️⃣ Définir une grille de base

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

👉 Ici, on définit une grille de 3 colonnes égales avec un espace de 20px entre les éléments.
C’est la base pour créer un layout flexible.

2️⃣ Créer un layout responsive avec `auto-fit` et `minmax`

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

👉 Avec auto-fit, la grille s’adapte automatiquement à l’espace disponible.
Chaque colonne a une taille minimale de 250px et peut s’étendre jusqu’à occuper tout l’espace (1fr).

3️⃣ Combiner colonnes et lignes

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 200px;
  gap: 15px;
}

👉 Exemple classique : une colonne principale plus large (2fr) et une sidebar (1fr).
Les lignes peuvent avoir des tailles automatiques ou fixes.

4️⃣ Placer un élément sur plusieurs colonnes ou lignes

.item1 {
  grid-column: 1 / 3;  /* occupe les colonnes 1 et 2 */
  grid-row: 1 / 2;     /* occupe la première ligne */
}

👉 Très utile pour créer des en-têtes, des bannières ou des zones spéciales dans ta mise en page.

5️⃣ Utiliser les grid areas pour un code plus lisible

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
}

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

👉 Avec cette technique, tu définis des zones nommées (header, main, sidebar, footer) → ton code devient beaucoup plus clair.

Conclusion

Avec ces 5 astuces :

tu peux créer des layouts fluides et responsives
contrôler la largeur minimale et maximale des colonnes
placer facilement des éléments sur plusieurs lignes ou colonnes
organiser ton code de manière lisible et modulaire

⚡ CSS Grid est un outil puissant, surtout lorsqu’il est combiné à Flexbox.
➡️ Dans un futur article, je pourrai te montrer comment mélanger Flexbox et CSS Grid pour obtenir des designs encore plus flexibles.