CSS Grid · Cours CSS | Apprendre à coder

C'est quoi CSS Grid ?

CSS Grid est un système de mise en page bidimensionnel. Contrairement à Flexbox qui travaille sur un seul axe (à la fois), Grid gère lignes ET colonnes en même temps.

Flexbox vs Grid : utilisez Flexbox pour aligner des éléments dans une direction (navbar, liste de cartes). Utilisez Grid pour créer une mise en page complète (header + sidebar + contenu + footer).

Colonnes et lignes

On active Grid avec display: grid, puis on définit la structure :

Prédisez avant de lire

Avant de dérouler : avec grid-template-columns: 1fr 2fr 1fr, quelle largeur fait chaque colonne par rapport au conteneur ? Que représente exactement l'unité fr ?

Voir la réponse

L'unité fr représente une fraction de l'espace disponible dans le conteneur. Ici, le total vaut 1 + 2 + 1 = 4 fractions : la 1re colonne prend 1/4 (25 %), la 2e prend 2/4 (50 %), la 3e prend 1/4 (25 %). Le fr se partage l'espace qui reste après les colonnes de taille fixe et les gap, et s'adapte automatiquement à la taille du conteneur.

grid-template-columns: 1fr 1fr 1fr : 3 colonnes de taille égale
grid-template-columns: 200px 1fr : sidebar fixe + contenu flexible
grid-template-rows: auto 1fr auto : header + contenu extensible + footer

L'unité fr (fraction) répartit l'espace disponible. 1fr 2fr donne 1/3 + 2/3 de la largeur.

gap: 16px ajoute de l'espace entre les cellules (comme en Flexbox).

On place les items entre les « lignes » de grille, numérotées de bord à bord.

Placement des items

Chaque item peut s'étendre sur plusieurs colonnes ou lignes :

grid-column: 1 / 3 : de la colonne 1 à la colonne 3 (occupe 2 colonnes)
grid-column: span 2 : occupe 2 colonnes (même résultat)
grid-row: 1 / 3 : occupe 2 lignes

grid-template-areas : le pouvoir visuel

La propriété la plus intuitive de Grid. Vous dessinez littéralement votre mise en page :

grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";

Chaque élément se place ensuite avec grid-area: header.

What is CSS Grid?

CSS Grid is a two-dimensional layout system. Unlike Flexbox which works on one axis at a time, Grid handles rows AND columns simultaneously.

Flexbox vs Grid: use Flexbox to align elements in one direction (navbar, card list). Use Grid to create complete layouts (header + sidebar + content + footer).

Columns and rows

Activate Grid with display: grid, then define the structure:

Predict before reading

Before you scroll down: with grid-template-columns: 1fr 2fr 1fr, how wide is each column relative to the container? What exactly does the fr unit represent?

See the answer

The fr unit represents a fraction of the available space in the container. Here, the total is 1 + 2 + 1 = 4 fractions: the 1st column takes 1/4 (25 %), the 2nd takes 2/4 (50 %), the 3rd takes 1/4 (25 %). The fr distributes the space left after fixed-size columns and gap, and adapts automatically to the container width.

grid-template-columns: 1fr 1fr 1fr — 3 equal-size columns
grid-template-columns: 200px 1fr — fixed sidebar + flexible content
grid-template-rows: auto 1fr auto — header + expandable content + footer

The fr unit (fraction) distributes available space. 1fr 2fr gives 1/3 + 2/3 of the width.

gap: 16px adds space between cells (just like Flexbox).

Items are placed between the grid "lines", numbered edge to edge.

Placing items

Each item can span multiple columns or rows:

grid-column: 1 / 3 — from column 1 to column 3 (spans 2 columns)
grid-column: span 2 — spans 2 columns (same result)
grid-row: 1 / 3 — spans 2 rows

grid-template-areas: visual power

The most intuitive Grid property. You literally draw your layout:

grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";

Each element then places itself with grid-area: header.

Essayez vous-même

.page {
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
    min-height: 300px;
    gap: 2px;
  }

.header {
    grid-area: header;
    background: #1e3a5f;
    color: white;
    padding: 12px 20px;
    font-weight: bold;
  }
  .sidebar {
    grid-area: sidebar;
    background: #e0ecff;
    padding: 16px;
    font-size: 14px;
  }
  .content {
    grid-area: content;
    background: #f8fafc;
    padding: 16px;
  }
  .footer {
    grid-area: footer;
    background: #374151;
    color: white;
    padding: 10px 20px;
    font-size: 12px;
    text-align: center;
  }
</style>

<div class="page">
    <header class="header">MonSite.com</header>
    <aside class="sidebar">
        <p>Menu</p>
        <ul>
            <li>Accueil</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul>
    </aside>
    <main class="content">
        <h2>Bienvenue</h2>
        <p>Contenu principal de la page.</p>
    </main>
    <footer class="footer">&copy; 2026 MonSite</footer>
</div>

🎯 Pratique

S'entraîner (clique pour ouvrir) :

✨ Prompt IA

Avec l'IA

Pour pratiquer CSS Grid de manière ludique, essayez :

CSS Grid Garden : https://cssgridgarden.com/ : Un jeu gratuit pour apprendre CSS Grid en arrosant votre jardin de carottes.

Exercice : Corrigez le code de l'IA

L'IA a utilisé grid-template-columns: 1fr 1fr alors qu'on voulait 3 colonnes égales pour les cartes. Corrigez pour obtenir 3 colonnes.

Corrigez le code

⚖️ Juge le code de l'IA

Accepter ou rejeter le code de l'IA

Tu demandes à l'IA une galerie de 3 cartes par ligne. Elle te répond ça. Ton rôle de relecteur : accepter tel quel ou rejeter, et dire pourquoi.

.gallery {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  gap: 16px;
}

À rejeter. Trois colonnes en 300px figées font 900px + gaps : sur un téléphone (375px de large) la galerie déborde et provoque un scroll horizontal. Le réflexe Grid : grid-template-columns: repeat(3, 1fr) pour 3 colonnes qui se partagent l'espace, ou mieux repeat(auto-fit, minmax(200px, 1fr)) pour que le nombre de colonnes s'adapte tout seul à la largeur. Les px fixes sur les colonnes sont l'anti-pattern Grid le plus courant.

🧠 Rappel libre

Rappel libre

Sans remonter dans la leçon : qu'est-ce qui distingue Grid de Flexbox, et que vaut grid-template-columns: 1fr 2fr pour la répartition de la largeur ?

Grid est bidimensionnel : il gère lignes ET colonnes en même temps, là où Flexbox ne travaille que sur un axe à la fois. L'unité fr est une fraction de l'espace disponible : 1fr 2fr découpe la largeur en 3 parts et donne 1/3 à la première colonne, 2/3 à la seconde.

Quelle est la différence principale entre Flexbox et Grid ?

Grid est plus rapide Flexbox est 1D (un axe), Grid est 2D (lignes + colonnes) Grid remplace complètement Flexbox

Que signifie 1fr ?

1 pixel fixe 1 pourcent 1 fraction de l'espace disponible

Comment faire qu'un élément occupe 2 colonnes ?

width: 2fr grid-column: span 2 columns: 2

Prochaine étape

Vous savez maintenant bâtir des mises en page en grille. Mais elles doivent aussi tenir sur un écran de téléphone. Dans la prochaine leçon, on rend tout ça adaptatif avec le responsive design : media queries, unités relatives et grilles qui se réorganisent selon la taille de l'écran.

Leçon 7 : Responsive design →