Introduction à CSS Grid

1. Qu’est-ce que CSS Grid ?

CSS Grid est un système de mise en page qui vous permet de diviser une page en plusieurs régions principales. Il est idéal pour organiser la structure globale d’un site web, comme un en-tête, une barre latérale, le contenu principal et un pied de page.

2. Activer une grille

Pour transformer un conteneur en grille, il suffit d’appliquer display: grid;. Tous ses enfants deviennent alors des « items » de la grille, prêts à être placés.

3. Définir des colonnes et lignes

On utilise grid-template-columns et grid-template-rows pour définir la structure. L’unité fr (fraction) est très utile pour créer des colonnes flexibles qui s’adaptent à l’espace disponible.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 100px auto 50px;
}

4. Placer les éléments

Par défaut, les éléments se placent automatiquement. Mais vous pouvez les positionner précisément sur la grille en indiquant les lignes de début et de fin.

.item1 {
  grid-column: 1 / 3; /* Commence à la ligne 1, finit avant la 3 */
  grid-row: 1 / 2;    /* Occupe la première ligne */
}

5. Un exemple concret

Voici une mise en page de site simple réalisée avec Grid :

<!-- HTML -->
<div class="container">
  <header>Header</header>
  <main>Contenu</main>
  <footer>Footer</footer>
</div>

<!-- CSS -->
.container {
  display: grid;
  grid-template-columns: 1fr; /* Une seule colonne */
  grid-template-rows: 100px auto 50px; /* Header, Main, Footer */
  gap: 10px;
}

6. Différence avec Flexbox

Utilisez Grid pour la mise en page globale de votre page (la structure principale) et Flexbox pour aligner les éléments à l’intérieur de chaque zone de la grille (par exemple, pour centrer les liens dans votre menu de navigation).

📝 Exercice pratique

Créez une page avec une grille complexe : un en-tête et un pied de page qui prennent toute la largeur, et une zone centrale avec un menu à gauche, un contenu principal flexible et une barre latérale à droite.

Indice : vous aurez besoin de grid-template-columns et de grid-column pour placer chaque élément.