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 :

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).

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).

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

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