CSS Grid : Comprendre les Grilles Simplement

Colonnes, lignes, template-areas, responsive sans media queries — le layout 2D maîtrisé

Sections

25+

Exemples

2026

Mis à jour

📚 Navigation

🏠 Hub Programmation
🎨 Cours HTML & CSS
💪 Flexbox
🎯 Centrer un élément

📋 Sommaire

1. Le principe de CSS Grid
7. Responsive sans media queries
2. Colonnes et lignes
8. Alignement
3. L'unité fr et repeat()
9. 5 patterns Grid
4. Gap
10. Grid vs Flexbox
5. Placer des éléments
11. Questions fréquentes
6. grid-template-areas

SECTION 01

Le principe de CSS Grid

🔲 Une grille invisible

Comme Flexbox, Grid fonctionne avec un conteneur (parent) et des items (enfants directs). La différence : Grid crée une grille invisible avec des lignes et des colonnes, et tu peux placer tes éléments n'importe où sur cette grille.

.conteneur

Cet exemple crée une grille avec une sidebar gauche (200px), un contenu central (flexible), et une sidebar droite (200px).

SECTION 02

Définir des colonnes et des lignes

/* Colonnes fixes */
grid-template-columns: 100px 200px 100px;

/* Colonnes flexibles */
grid-template-columns: 1fr 2fr 1fr; /* ratio 1:2:1 */

/* Mélange fixe + flexible */
grid-template-columns: 250px 1fr; /* sidebar fixe + contenu flex */

/* Lignes */
grid-template-rows: 80px 1fr 60px; /* header + contenu + footer */

Valeur	Signification
200px	Taille fixe en pixels
1fr	Une fraction de l'espace disponible
auto	S'adapte au contenu
min-content	Aussi petit que possible sans overflow
max-content	Aussi grand que le contenu le demande
minmax(200px, 1fr)	Entre 200px minimum et 1fr maximum

SECTION 03

L'unité fr et repeat()

📐 fr = fraction de l'espace disponible

/* 3 colonnes égales */
grid-template-columns: 1fr 1fr 1fr;

/* Raccourci avec repeat() */
grid-template-columns: repeat(3, 1fr);

/* 12 colonnes (comme Bootstrap) */
grid-template-columns: repeat(12, 1fr);

/* 4 colonnes de 200px */
grid-template-columns: repeat(4, 200px);

repeat() est un raccourci indispensable — tu l'utiliseras constamment.

SECTION 04

Gap : espacement entre cellules

.grille

gap ne met de l'espace qu'entre les cellules, jamais sur les bords. Plus propre que les marges.

SECTION 05

Placer des éléments sur la grille

📌 grid-column et grid-row

Par défaut, les items remplissent la grille dans l'ordre du HTML. Tu peux aussi les placer explicitement :

/* De la colonne 1 à la colonne 3 */
.header

/* Placement ligne + colonne */
.sidebar

Propriété	Rôle
grid-column: 1 / 3	De la ligne de colonne 1 à 3
grid-column: span 2	Occupe 2 colonnes depuis la position actuelle
grid-column: 1 / -1	Toute la largeur (-1 = dernière ligne)
grid-row: 2 / 4	De la ligne 2 à 4

SECTION 06

grid-template-areas : le layout visuel

🎨 Dessiner ton layout en ASCII

C'est la fonctionnalité la plus élégante de Grid — tu « dessines » ton layout :

.page

.header
.sidebar
.content
.footer

Chaque mot dans grid-template-areas correspond à une cellule. Les mots identiques fusionnent les cellules. Utilise un . pour une cellule vide.

SECTION 07

Responsive sans media queries

✨ La combinaison magique : auto-fit + minmax()

.cards

Comment ça marche :

auto-fit = crée autant de colonnes que possible
minmax(280px, 1fr) = chaque colonne fait au minimum 280px, au maximum une fraction égale
Résultat : 4 colonnes sur grand écran, 2 sur tablette, 1 sur mobile — sans aucune media query

auto-fit vs auto-fill

Propriété	Quand il y a trop d'espace
auto-fit	Colonnes vides supprimées, items grandissent
auto-fill	Colonnes vides conservées, items gardent leur taille

Dans 99% des cas, auto-fit est ce que tu veux.

SECTION 08

Alignement dans la grille

Propriété	S'applique à	Axe
justify-items	Tous les items	Horizontal (dans leur cellule)
align-items	Tous les items	Vertical (dans leur cellule)
place-items	Tous les items	Raccourci : align + justify
justify-content	La grille entière	Horizontal
align-content	La grille entière	Vertical
justify-self	Un item spécifique	Horizontal
align-self	Un item spécifique	Vertical

/* Centrer tous les items dans leur cellule */

.grille

SECTION 09

5 patterns Grid à connaître

Pattern	Code CSS	Usage
Layout page	grid-template-areas + zones nommées	Sites header/sidebar/footer
Cartes responsive	repeat(auto-fit, minmax(280px, 1fr))	Listing produits, portfolio
12 colonnes	repeat(12, 1fr) + grid-column: span N	Remplacer Bootstrap
Masonry (quasi)	grid-template-rows: masonry (expérimental)	Galleries photos
Dashboard	Template areas + zones de tailles variées	Panneaux d'administration

SECTION 10

Grid vs Flexbox : résumé

Critère	Flexbox	Grid
Dimension	1D (une direction)	2D (lignes + colonnes)
Contenu dicte la taille	Oui	Non, la grille impose
Idéal pour	Composants (navbar, boutons)	Layouts de page, galleries
Placement libre	Non (ordre du DOM)	Oui (n'importe quelle cellule)

En pratique : Grid pour le layout global, Flexbox à l'intérieur des composants. Les deux se combinent parfaitement. Voir notre fiche Flexbox.

SECTION 11

Questions fréquentes

CSS Grid est-il supporté par tous les navigateurs ?

Oui. CSS Grid est supporté par tous les navigateurs modernes depuis 2017. gap en Grid est supporté depuis encore plus longtemps que gap en Flexbox. Aucun souci de compatibilité.

Peut-on utiliser Grid et Flexbox ensemble ?

Oui, et c'est recommandé. Le pattern courant : layout de page en Grid, composants (navbar, cartes, boutons) en Flexbox à l'intérieur. Un enfant Grid peut aussi être un conteneur Flex.

C'est quoi la différence entre auto-fit et auto-fill ?

auto-fit supprime les colonnes vides et étire les items. auto-fill garde les colonnes vides même sans items. Avec peu d'items et beaucoup d'espace, auto-fit étire, auto-fill laisse à la taille minimale.

Comment créer un layout 12 colonnes sans Bootstrap ?

grid-template-columns: repeat(12, 1fr) puis place tes éléments avec grid-column: span 4 (⅓), span 6 (½), span 12 (pleine largeur). Plus léger que Bootstrap.

📚 Fiches liées

💪 Flexbox
🎯 Centrer un élément
📱 Media queries
📌 Position CSS
🎨 Cours HTML & CSS
🏠 Hub Programmation

CSS Grid — Comprendre les grilles en CSS simplement

Référence : MDN CSS Grid