Tutoriel CSS Grid

La mise en page web a longtemps été un casse-tête. Entre les floats, les marges négatives et les hacks en tout genre, créer une grille stable demandait de la patience. Aujourd’hui, tout a changé avec CSS Grid. Cette technologie permet de construire des mises en page réactives, simples et propres, sans recourir à des frameworks externes.

Dans ce tutoriel, découvre comment utiliser cet outil pas à pas, avec des exemples clairs et des bonnes pratiques.

Qu’est-ce que CSS Grid

CSS Grid est un module CSS moderne conçu pour gérer des grilles en deux dimensions : lignes et colonnes. Contrairement à Flexbox, qui fonctionne sur un axe, cette méthode permet de travailler sur les deux en même temps.

Elle permet de :

• Créer des mises en page complexes en quelques lignes
• Gérer facilement les espacements
• Positionner les éléments avec précision
• Rendre un site responsive sans media queries compliquées

C’est un outil puissant, désormais pris en charge par tous les navigateurs modernes.

Étape 1 : activer la grille

Pour commencer, il faut désigner un conteneur comme zone de grille. Cela se fait avec une seule ligne :

.container {
  display: grid;
}

Tous les éléments enfants deviendront alors des blocs que tu pourras organiser comme tu le souhaites.

Étape 2 : définir colonnes et lignes

Voici un exemple de base avec trois colonnes de largeur égale :

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Le terme 1fr signifie « une fraction » de l’espace disponible. Tu peux aussi utiliser des tailles fixes :

grid-template-columns: 200px 1fr 2fr;

Cela crée une première colonne fixe, et deux colonnes flexibles.

Étape 3 : ajouter de l’espace entre les éléments

Pour espacer les blocs, la propriété gap est très efficace :

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

Elle remplace avantageusement les marges entre éléments.

Étape 4 : placer un élément avec précision

Chaque élément peut être positionné à un endroit précis de la grille :

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

C’est utile pour créer des mises en page plus dynamiques ou asymétriques.

Étape 5 : créer une grille responsive

Pour créer une mise en page adaptative, utilise la fonction auto-fit :

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

Cette structure ajuste automatiquement le nombre de colonnes selon l’espace disponible.

Bonnes pratiques

Voici quelques conseils à suivre :

• Commence par une structure simple
• Combine avec Flexbox si nécessaire pour les éléments internes
• Privilégie des noms de classes clairs
• Organise la structure, sans surcharger le style
• Vérifie toujours le rendu sur plusieurs tailles d’écran

Ressource utile pour s’entraîner

Un site très populaire permet de s’exercer de manière ludique :

Grid Garden – CSS Grid Game (en anglais)

Tu y arroses des plantes en écrivant des règles CSS. Une méthode originale et efficace pour apprendre.

Projets pour mettre en pratique

Voici quelques idées simples à réaliser :

• Une galerie photo qui s’ajuste selon l’écran
• Une page d’accueil structurée avec un en-tête, un corps et un pied de page
• Une carte de visite numérique avec une présentation à deux colonnes
• Un tableau de bord avec blocs informatifs

Ces projets t’aideront à comprendre l’organisation spatiale offerte par la grille.