Commencer→
Retour au cours

frontend / css

Grid fondamentaux

Leçon 71 exercice

Explication

Ce que vous allez apprendre

  • Construire une grille à deux dimensions avec grid-template-columns/grid-template-rows
  • Utiliser l'unité fr pour répartir l'espace restant entre colonnes
  • Créer une grille responsive sans aucune media query grâce à repeat(auto-fit, minmax(...))
  • Placer des éléments par numéro de ligne/colonne ou avec grid-template-areas
  • Choisir entre auto-fit et auto-fill selon le comportement souhaité des colonnes vides

Dans quel contexte ?

Le layout de tableau-de-bord.html (header, menu latéral, contenu principal, footer) est actuellement construit avec des float et des largeurs en pourcentage bricolées, cassant dès qu'une colonne change de hauteur. En migrant vers display: grid avec grid-template-areas, le plan de page devient lisible directement dans le CSS — chaque zone porte un nom explicite (entete, menu, contenu, bas) — et l'agencement en lignes ET colonnes devient enfin fiable.

Étape 1 : la limite de Flexbox, un seul axe

Flexbox excelle pour aligner des éléments sur UN axe, une ligne ou une colonne. Mais dès qu'il faut construire un vrai layout de page — header, sidebar, contenu, footer organisés en lignes ET en colonnes — il montre ses limites.

Étape 2 : la solution, penser en deux dimensions

CSS Grid a été conçu précisément pour cette situation : il pense la mise en page comme une vraie grille à deux dimensions, lignes et colonnes simultanément.

Étape 3 : l'unité fr, une idée simple

Voyons d'abord l'unité fr (fraction), qui représente une part de l'espace RESTANT une fois les tailles fixes soustraites. grid-template-columns: 200px 1fr 1fr réserve 200px pour la première colonne, puis partage le reste également entre les deux autres.

Étape 4 : une grille responsive sans media query

Une fois fr compris, voici l'un des patterns les plus puissants de CSS moderne : repeat(auto-fit, minmax(240px, 1fr)). Il dit au navigateur "crée autant de colonnes de 240px minimum que la largeur le permet, et répartis le reste".

Étape 5 : pourquoi ce pattern change la façon de penser

Le nombre de colonnes s'ajuste alors automatiquement selon la taille d'écran, sans jamais écrire de @media. Au lieu de définir des paliers fixes, on laisse la grille se réorganiser d'elle-même selon une règle générale.

ValeurColonnes vides (espace insuffisant pour une de plus)
auto-fitSupprimées, les items existants s'étirent pour combler l'espace
auto-fillConservées vides, gardant un alignement stable

Bonne pratique

Pour une grille de cartes produit responsive, grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) remplace souvent quatre ou cinq media queries différentes, tout en s'adaptant en continu à n'importe quelle largeur d'écran.

Étape 6 : nommer visuellement son layout

Il reste un outil très lisible à connaître : plutôt que de placer chaque élément par des numéros de ligne/colonne, grid-template-areas permet de "dessiner" le plan de la page directement en texte, avec des noms de zones répétés selon leur position.

Prérequis

Cette leçon suppose une bonne maîtrise de Flexbox (axes, flex: 1, gap) ; Grid partage beaucoup de vocabulaire avec Flexbox mais raisonne sur deux dimensions au lieu d'une seule.

Et ensuite ?

Une fois ces bases de Grid posées, la prochaine étape consiste à explorer des besoins plus fins : alignement précis, superposition, et grilles imbriquées.

Commandes & code

Grid fondamentaux

Aligner et distribuer des éléments sur DEUX axes simultanément : lignes et colonnes.

css
.grille {
    display: grid;
    grid-template-columns: 200px 1fr 1fr; /* 3 colonnes : fixe, puis 2 flexibles à égalité */
    grid-template-rows: 80px auto 60px;    /* header, contenu, footer */
    gap: 16px;
}

/* fr : fraction de l'espace disponible restant, après soustraction des tailles fixes */
.grille-egale {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes strictement égales */
    gap: 24px;
}
css
/* repeat() avec auto-fill / auto-fit : responsive SANS media query */
.grille-produits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
/* auto-fit : les colonnes vides sont supprimées, les items existants s'étirent
   auto-fill : les colonnes vides restent (utile pour garder un alignement stable) */
css
/* Placement explicite via les lignes de la grille (numérotées à partir de 1) */
.header    { grid-column: 1 / -1; }      /* de la 1ère à la dernière ligne -> pleine largeur */
.sidebar   { grid-column: 1 / 2; grid-row: 2 / 3; }
.contenu   { grid-column: 2 / 3; grid-row: 2 / 3; }
.footer    { grid-column: 1 / -1; }

/* Raccourci span : "occupe N pistes à partir d'ici" */
.large { grid-column: span 2; }
html
<!-- Layout de page classique avec grid-template-areas : le plus lisible -->
<div class="page">
    <header class="entete">Header</header>
    <nav class="menu">Nav</nav>
    <main class="contenu">Contenu</main>
    <aside class="lateral">Sidebar</aside>
    <footer class="bas">Footer</footer>
</div>
css
.page {
    display: grid;
    grid-template-columns: 220px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "entete entete entete"
        "menu   contenu lateral"
        "bas    bas     bas";
    min-height: 100vh;
    gap: 16px;
}

.entete  { grid-area: entete; }
.menu    { grid-area: menu; }
.contenu { grid-area: contenu; }
.lateral { grid-area: lateral; }
.bas     { grid-area: bas; }
/* le schéma visuel DANS le CSS rend le layout immédiatement lisible,
   même sans regarder le HTML */

Résumé

  • fr distribue l'espace restant après les colonnes/lignes de taille fixe.
  • repeat(auto-fit, minmax(240px, 1fr)) crée une grille responsive sans aucune media query.
  • grid-template-areas documente visuellement le layout directement dans le CSS.
  • grid-column: 1 / -1 fait qu'un élément traverse toute la largeur de la grille.

Exercices pratiques

1 disponible
1

Mission : reconstruire un tableau de bord qui casse en float

Objectif : Convertir un layout bricolé en float vers CSS Grid et diagnostiquer le comportement d'auto-fit face à auto-fill.

Contexte

Sur tableau-de-bord.html, le layout comporte un header pleine largeur, un menu latéral fixe à gauche, une zone de contenu principale, et un footer pleine largeur. La grille cible utilise grid-template-columns: 220px 1fr; et doit encoder ce plan directement dans le CSS avec des zones nommées, plutôt qu'avec des positions de ligne/colonne numérotées difficiles à relire six mois plus tard.

Résoudre l’exercice →