Maîtriser CSS Grid pour vos mises en page

Flexbox aligne magnifiquement les éléments sur une ligne ou une colonne. Mais dès que vous voulez orchestrer une vraie mise en page — un en-tête en haut, une zone principale et une colonne latérale côte à côte, un pied de page tout en bas, le tout en grille régulière — vous touchez les limites d’un outil à une dimension. CSS Grid est né pour ça : c’est le premier système de disposition bidimensionnel du web, qui pense en lignes et en colonnes simultanément. Dans cette leçon, vous allez transformer le catalogue de la Médiathèque Horizon en une grille d’ouvrages parfaitement régulière et adaptative, puis composer la structure générale de la page avec des zones nommées d’une lisibilité déconcertante.

🎯 Ce que vous allez apprendre

• Activer une grille et définir ses colonnes et ses lignes avec grid-template-columns et grid-template-rows.
• Manier l’unité fr, la fonction repeat() et minmax() pour des grilles fluides.
• Créer une galerie réellement adaptative avec auto-fit et minmax(), sans media query.
• Composer une mise en page complète avec des zones nommées (grid-template-areas).
• Positionner finement un élément sur plusieurs colonnes ou lignes avec grid-column et span.

🛠️ Ce que vous allez construire

D’abord une grille de catalogue : des dizaines de cartes d’ouvrages réparties en colonnes régulières qui s’ajustent automatiquement au nombre de places disponibles. Ensuite, la charpente complète de la page — en-tête, contenu principal, colonne d’informations, pied de page — décrite en quelques lignes lisibles comme un plan. À la fin, vous saurez choisir entre Flexbox et Grid sans hésiter, et combiner les deux.

Prérequis

• La page de la médiathèque avec ses cartes (leçons précédentes).
• Être à l’aise avec le modèle de boîte et avoir vu Flexbox.
• ⏱️ Temps estimé : environ 55 minutes.

Étape 1 — Activer la grille et poser des colonnes

Comme Flexbox, Grid s’active sur un conteneur parent, mais avec display: grid. La différence fondamentale : on définit explicitement la structure des colonnes (et éventuellement des lignes) via grid-template-columns. Chaque valeur de cette propriété décrit une colonne et sa largeur.

Donnons trois colonnes égales au conteneur du catalogue :

.catalogue {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

L’unité fr (pour fraction) est la grande nouveauté de Grid : elle représente une part de l’espace disponible. 1fr 1fr 1fr signifie « trois colonnes qui se partagent l’espace en parts égales ». Contrairement aux pourcentages, l’unité fr tient déjà compte du gap, ce qui évite les calculs pénibles. Rechargez : vos cartes s’organisent en trois colonnes nettes, séparées de 16 pixels horizontalement et verticalement par un seul gap. Une grille en trois lignes de CSS.

Étape 2 — repeat() : éviter la répétition

Écrire 1fr 1fr 1fr pour trois colonnes va encore ; pour douze, ce serait absurde. La fonction repeat() condense cette répétition. repeat(3, 1fr) est l’équivalent exact de 1fr 1fr 1fr, en plus lisible et plus maintenable.

.catalogue {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

Vous passez à quatre colonnes en changeant un seul chiffre. Cette concision est précieuse quand la grille évolue. Mais une grille à nombre de colonnes fixe a un défaut : sur un petit écran, quatre colonnes deviennent illisibles, et sur un grand écran, trois colonnes laissent un vide. Il nous faut une grille qui décide elle-même du nombre de colonnes. C’est l’objet de l’étape suivante, le motif le plus utile de tout Grid.

Étape 3 — La galerie adaptative avec auto-fit et minmax()

Voici la technique à mémoriser absolument. On combine repeat() avec le mot-clé auto-fit et la fonction minmax() pour obtenir une grille qui crée autant de colonnes que la largeur le permet, chacune ne descendant jamais sous une taille minimale. Aucune media query nécessaire.

.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

Décortiquons cette ligne, car elle vaut de l’or. minmax(220px, 1fr) dit : « chaque colonne fait au minimum 220 px, au maximum une part égale de l’espace ». auto-fit demande au navigateur de placer autant de colonnes de cette taille qu’il peut, puis d’étirer celles existantes pour combler la ligne. Résultat concret : sur un large écran, six cartes par ligne ; sur une tablette, trois ; sur un mobile, une seule — et tout se réorganise en douceur quand on redimensionne. Rechargez et étirez la fenêtre : la grille respire toute seule.

✅ Point d’étape — Votre catalogue affiche un nombre de colonnes qui s’adapte à la largeur, chaque carte gardant au moins 220 px. C’est, à lui seul, le motif responsive le plus rentable du CSS moderne. Notez la nuance : auto-fill conserverait des colonnes vides en réserve, là où auto-fit les fait disparaître en étirant les cartes présentes.

Étape 4 — Composer la page avec des zones nommées

Grid brille particulièrement pour la disposition générale d’une page. Sa fonctionnalité la plus élégante, grid-template-areas, permet de dessiner la mise en page avec des noms, comme un plan ASCII. On nomme chaque région, puis on assigne chaque élément à sa zone.

Imaginons la charpente de la médiathèque : un en-tête sur toute la largeur, puis le contenu principal à gauche et la colonne d’infos à droite, enfin un pied de page sur toute la largeur. Sur le conteneur global (par exemple <body> ou un <div class="page">) :

.page {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "entete entete"
    "principal aside"
    "pied pied";
  gap: 16px;
}

header  { grid-area: entete; }
main    { grid-area: principal; }
aside   { grid-area: aside; }
footer  { grid-area: pied; }

Lisez le bloc grid-template-areas : il dessine littéralement la page. La première ligne « entete entete » occupe les deux colonnes ; la deuxième place « principal » et « aside » côte à côte ; la troisième étend « pied » sur toute la largeur. Chaque élément rejoint sa zone via grid-area. Cette approche est d’une lisibilité remarquable : six mois plus tard, on comprend la mise en page d’un coup d’œil. Et pour la rendre responsive, il suffira de redessiner ces zones dans une media query — ce que verra la prochaine leçon.

Étape 5 — Positionner un élément sur plusieurs cellules

Parfois, une carte doit s’étendre sur deux colonnes — un ouvrage « coup de cœur » mis en avant, par exemple. Les propriétés grid-column et grid-row contrôlent l’emprise d’un élément, avec le mot-clé span pour indiquer un nombre de pistes à couvrir.

.carte.coup-de-coeur {
  grid-column: span 2;
}

Cette carte occupera désormais deux colonnes de la grille au lieu d’une, attirant naturellement l’œil. On peut aussi cibler des lignes de grille précises avec une syntaxe de début/fin, par exemple grid-column: 1 / 3 (de la ligne 1 à la ligne 3, soit deux colonnes). Le mot-clé span reste cependant le plus intuitif pour débuter : on raisonne en « combien de cases », pas en numéros de lignes. Combiné à la grille adaptative, cela permet des compositions riches tout en restant fluides.

✅ Point d’étape — Une carte mise en avant s’étale sur deux colonnes tandis que les autres gardent leur taille. Ouvrez les outils de développement : la plupart des navigateurs proposent un « inspecteur de grille » qui superpose les numéros de lignes et les zones — un atout majeur pour visualiser et déboguer une grille.

Étape 6 — Aligner le contenu dans la grille

Comme Flexbox, Grid offre des propriétés d’alignement, mais sur deux axes. justify-items aligne le contenu de chaque cellule horizontalement ; align-items l’aligne verticalement ; le raccourci place-items combine les deux. Au niveau de la grille entière, justify-content et align-content répartissent l’ensemble des pistes quand elles n’occupent pas tout l’espace.

.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
}

Ici, align-items: start aligne les cartes en haut de leur cellule plutôt que de les étirer à la même hauteur (comportement par défaut stretch). Utile quand les cartes ont des contenus de hauteurs différentes et qu’on veut éviter qu’elles s’étirent toutes à la taille de la plus grande. Vous maîtrisez désormais le placement et l’alignement, en colonnes comme en lignes.

Comprendre : lignes, pistes et grille implicite

Pour aller plus loin que la recette, il faut un modèle mental précis du vocabulaire de Grid. Une grille est faite de pistes (les colonnes et les lignes que vous déclarez) séparées par des lignes de grille numérotées. Dans une grille à trois colonnes, il existe quatre lignes verticales, numérotées de 1 (bord gauche) à 4 (bord droit). C’est sur ces numéros que s’appuie la syntaxe grid-column: 1 / 3 : « commence à la ligne 1, termine à la ligne 3 ». Comprendre cette numérotation, c’est cesser de placer les éléments à tâtons.

Autre distinction décisive : la grille explicite est celle que vous définissez avec grid-template-columns et grid-template-rows. Mais que se passe-t-il si vous placez plus d’éléments que de cellules prévues ? Le navigateur crée alors des pistes supplémentaires : c’est la grille implicite. Vous ne déclarez généralement que les colonnes ; les lignes, elles, naissent implicitement au fur et à mesure que les éléments s’ajoutent. La propriété grid-auto-rows fixe la hauteur de ces lignes générées automatiquement, et grid-auto-flow décide du sens de remplissage (par lignes, par défaut, ou par colonnes avec column).

Un exemple parlant : une galerie où l’on connaît la largeur des colonnes mais pas le nombre d’ouvrages. On déclare les colonnes une fois, et chaque nouvelle rangée d’ouvrages crée sa ligne implicite à la hauteur fixée par grid-auto-rows. C’est exactement le mécanisme qui rend la galerie adaptative de l’étape 3 capable d’accueillir trois ou trois cents cartes sans qu’on touche au CSS. Cette élégance — déclarer une structure et laisser le contenu la peupler — est ce qui distingue Grid des anciennes techniques où chaque rangée devait être gérée à la main.

🐞 Pièges fréquents

✅ Récapitulatif

Vous tenez le système de disposition le plus puissant du CSS. Vous activez une grille avec display: grid, vous définissez colonnes et lignes avec grid-template-columns/rows, vous fluidifiez avec fr, repeat() et minmax(), et surtout vous savez écrire la galerie adaptative repeat(auto-fit, minmax(220px, 1fr)) qui décide seule de son nombre de colonnes. Pour la structure d’une page, les zones nommées de grid-template-areas offrent une lisibilité inégalée, et grid-column: span 2 met un élément en valeur. Retenez la complémentarité : Flexbox pour une dimension, Grid pour deux, et les deux ensemble pour le reste. La médiathèque a maintenant un catalogue et une charpente dignes d’un vrai site. Reste à la rendre impeccable sur tous les écrans : c’est l’objet de la dernière leçon.

🧾 Aide-mémoire

💪 À vous de jouer

Transformez le catalogue pour que la toute première carte (« coup de cœur ») occupe deux colonnes et deux lignes, tandis que les autres restent en grille adaptative. Indice : combinez grid-column: span 2 et grid-row: span 2.

.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 180px;
  gap: 16px;
}
.carte:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

Tutoriels frères

• Maîtriser Flexbox pour vos mises en page — la disposition à une dimension, complémentaire de Grid.
• Responsive design : media queries et variables CSS — adapter la grille à chaque écran.

Pour aller plus loin

• 🔝 Retour au parcours : Apprendre HTML & CSS de zéro
• MDN — Concepts de base de la grille
• W3C — CSS Grid Layout (spécification)

FAQ

Quelle différence entre auto-fit et auto-fill ?
Les deux créent automatiquement des colonnes selon la largeur. auto-fill conserve des pistes vides quand il reste de la place (les cartes gardent leur taille minimale) ; auto-fit fait au contraire disparaître les pistes vides et étire les colonnes existantes pour combler la ligne. Pour une galerie qui occupe tout l’espace, auto-fit est généralement le bon choix.

Que représente l’unité fr ?
Une fraction de l’espace restant après prise en compte des éléments à taille fixe et des gap. 2fr 1fr attribue deux tiers de l’espace à la première colonne, un tiers à la seconde. C’est plus simple et plus fiable que les pourcentages.

Grid remplace-t-il Flexbox ?
Non, ils sont complémentaires. Grid structure la page en deux dimensions ; Flexbox aligne le contenu à l’intérieur d’une cellule ou gère une simple rangée. Un schéma fréquent : Grid pour la mise en page globale, Flexbox à l’intérieur de chaque carte ou barre.

Grid est-il bien pris en charge ?
Oui, CSS Grid est pris en charge par tous les navigateurs modernes depuis 2017 et constitue aujourd’hui un standard sûr pour la production. Vous pouvez l’utiliser sans réserve.