Le tutoriel CSS Grid le plus complet

Qu'est-ce que CSS Grid ?

CSS Grid est un puissant systeme de mise en page bidimensionnel qui vous permet de creer des layouts web complexes facilement. La ou Flexbox se concentre sur des mises en page unidimensionnelles (lignes ou colonnes), CSS Grid vous donne un controle total sur les lignes et les colonnes en meme temps. Imaginez un tableur pour votre layout web, ou vous pouvez definir exactement ou chaque element doit aller et combien d'espace il doit occuper.

Pensez a CSS Grid comme a un systeme de tableau moderne repense pour le web contemporain. Vous creez un conteneur de grille et placez des elements dans des zones precises, controlez leur dimensionnement et structurez la mise en page globale. C'est ideal pour les layouts de page complexes, les grilles de cartes, les dashboards et toute interface qui a besoin d'un controle precis du positionnement.

Ce qui rend CSS Grid si attractif, c'est son approche declarative. Au lieu de lutter avec des floats, du positionnement et des calculs complexes, vous dites simplement au navigateur "mets cet element ici" et "fais cette colonne de cette largeur". Le navigateur gere pour vous toute la geometrie, ce qui donne un code plus propre et plus maintenable.

Quand CSS Grid est-il sorti ?

CSS Grid est en preparation depuis un moment, avec des premieres idees au debut des annees 2010. Microsoft a propose pour la premiere fois le CSS Grid Layout Module en 2011, et la specification a beaucoup evolue depuis. Le W3C a publie un premier working draft en 2012, et la spec a connu plusieurs phases d'amelioration avant d'atteindre sa forme actuelle.

Le support navigateur a commence a apparaitre en 2016, Firefox menant la danse avec la version 52 (mars 2017). Chrome a suivi rapidement avec la version 57 (mars 2017) et Safari a rejoint en version 10.1 (mars 2017). Des 2018, CSS Grid avait un support solide sur les navigateurs majeurs, ce qui le rendait fiable pour un usage en production.

La specification a atteint le statut Candidate Recommendation en decembre 2016, et la premiere version stable du module CSS Grid Layout (Level 1) est devenue la reference pour l'implementation. Aujourd'hui, CSS Grid est un standard du web moderne.

Compatibilite navigateur

CSS Grid est supporte par tous les navigateurs modernes. Pour la plupart des projets, vous pouvez l'utiliser sans hesitation. Pour reference :

• Chrome : 57+
• Firefox : 52+
• Safari : 10.1+
• Edge : 16+ (EdgeHTML) et 79+ (Chromium)

Pour les environnements tres anciens, il existait une implementation historique sous forme de "grid" prefixe Microsoft (IE10/IE11), mais elle differait du standard et n'est plus recommandee. Dans la plupart des cas, si vous devez supporter IE, il est preferable d'utiliser une strategie de fallback (Flexbox ou layout simplifie) plutot que d'essayer de maintenir deux syntaxes Grid.

Les concepts fondamentaux

Conteneur grid vs items grid

CSS Grid fonctionne avec deux roles : le conteneur de grille (grid container) et les elements de grille (grid items). Vous activez Grid sur un conteneur en utilisant display: grid ou display: inline-grid. Les enfants directs de ce conteneur deviennent automatiquement des grid items.

.container {
  display: grid;
}

Une fois le conteneur defini, vous configurez la structure avec des lignes et des colonnes, puis vous placez les items dans la grille.

Lignes, colonnes, pistes et cellules

Une grille est composee de pistes (tracks) : des pistes de colonnes et des pistes de lignes. L'intersection d'une ligne et d'une colonne forme une cellule. Plusieurs cellules peuvent former une zone (area).

Creer une grille simple

La maniere la plus simple de demarrer consiste a definir des colonnes et des lignes avec grid-template-columns et grid-template-rows.

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

Ici, vous obtenez une grille de 3 colonnes et 2 lignes. La propriete gap cree un espace entre les pistes.

Dimensionner les colonnes et les lignes

CSS Grid propose plusieurs unites et fonctions utiles pour dimensionner les pistes :

• px, %, em, rem : unites classiques
• fr : unite fractionnaire propre a Grid (part du reste de l'espace disponible)
• minmax() : definir une taille min et max
• repeat() : repeter un motif
• auto : taille automatique selon le contenu

L'unite fr

L'unite fr represente une fraction de l'espace disponible. Par exemple :

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Ici, la deuxieme colonne prend deux fois plus d'espace que les colonnes 1 et 3.

repeat()

La fonction repeat() permet de repeter des pistes sans ecrire la meme chose plusieurs fois :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

minmax()

minmax() est essentiel pour creer des grilles responsives et robustes :

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

Chaque colonne fera au minimum 200px et pourra s'etendre jusqu'a 1fr.

Positionner les elements

Par defaut, les items se placent automatiquement dans la grille. Mais vous pouvez les positionner explicitement avec grid-column et grid-row.

.item1 {
  grid-column: 1 / 3; /* de la ligne de colonne 1 a 3 */
  grid-row: 1 / 2;
}

Vous pouvez aussi utiliser span :

.item2 {
  grid-column: span 2;
}

grid-template-areas

Une des fonctionnalites les plus lisibles de CSS Grid est grid-template-areas. Elle permet de definir des zones nommees et d'y assigner des elements.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 1rem;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

Alignement et justification

CSS Grid offre des proprietes puissantes pour aligner les items et les pistes :

• justify-items et align-items : alignent les items dans leurs cellules
• justify-content et align-content : alignent la grille dans le conteneur
• place-items et place-content : raccourcis

.grid {
  display: grid;
  justify-items: center;
  align-items: center;
}

Grilles responsives

Une technique courante consiste a combiner repeat() avec minmax() et auto-fit / auto-fill :

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

Cela cree une grille de cartes qui s'adapte automatiquement a la largeur disponible.

Exemples pratiques

Exemple : grille de cartes

<div class="cards">
  <article class="card">...</article>
  <article class="card">...</article>
  <article class="card">...</article>
</div>

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

Exemple : layout de page

<div class="layout">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 1rem;
}

Conclusion

CSS Grid est l'un des outils de mise en page les plus puissants du web moderne. Il vous permet de creer des layouts complexes et responsives avec un code plus simple, plus lisible et plus maintenable. En comprenant les concepts fondamentaux (pistes, zones, fr, minmax, repeat) et en pratiquant avec des exemples reels, vous pourrez utiliser CSS Grid efficacement dans la plupart de vos interfaces.

Que vous construisiez une page marketing, une application web ou un dashboard, CSS Grid vous donne un controle precis de la mise en page sans hacks. Commencez petit, puis exploitez progressivement les zones, l'alignement et les grilles responsives pour aller plus loin.