CSS Grid — CSS course | Learn to code

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 :

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:

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>

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

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

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

Next step

You can now build grid layouts. But they also have to fit on a phone screen. In the next lesson we make all of it adaptive with responsive design: media queries, relative units and grids that rearrange themselves based on screen size.

Lesson 7: Responsive design →