CSS Grid Layout

Pourquoi utiliser CSS Grid ?

CSS Grid a remplacé avec avantage les anciennes techniques de mise en page (float, positioning, tables) qui étaient des détournements de fonctionnalités non prévues pour cela. Grid apporte une approche moderne, sémantique et puissante :

• Contrôle bidimensionnel — gestion simultanée des lignes et des colonnes, impossible avec Flexbox.
• Mise en page sans div supplémentaires — Grid permet de placer des éléments où l’on veut dans la grille sans ajouter de wrappers intermédiaires.
• Responsive sans media queries — avec auto-fit et minmax(), les grilles s’adaptent automatiquement à la taille de l’écran.
• Alignement précis — comme Flexbox, Grid offre des contrôles d’alignement puissants sur les deux axes.
• Code plus sémantique — le HTML reste simple et lisible, la structure visuelle est entièrement définie en CSS.

Les concepts clés de CSS Grid

• Grid container — l’élément parent sur lequel on applique display: grid.
• Grid items — les enfants directs du container, qui se placent automatiquement dans la grille.
• grid-template-columns — définit le nombre et la largeur des colonnes. Exemple : grid-template-columns: 1fr 2fr 1fr crée 3 colonnes dont celle du milieu est deux fois plus large.
• grid-template-rows — définit le nombre et la hauteur des lignes.
• gap — espace entre les cellules de la grille (row-gap et column-gap séparés possibles).
• Unité fr (fraction) — unité spécifique à Grid qui représente une fraction de l’espace disponible. 1fr = 1 part, 2fr = 2 parts.
• grid-column / grid-row — permettent de faire occuper plusieurs colonnes ou lignes à un élément (équivalent du colspan/rowspan des tableaux).

Grid responsive avec auto-fit

L’une des fonctionnalités les plus puissantes de Grid est la création de grilles responsives sans media queries. La combinaison repeat() + auto-fit + minmax() crée automatiquement le bon nombre de colonnes selon la largeur disponible :

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Cette règle dit : “crée autant de colonnes que possible, chaque colonne faisant au minimum 250px et au maximum 1 fraction de l’espace disponible”. Sur un écran large, on aura 4-5 colonnes ; sur tablette, 2-3 ; sur mobile, 1 seule. Le tout sans écrire une seule media query.

Cas d’usage de CSS Grid

• Structure de page — header, sidebar, main, footer disposés en grille.
• Galeries d’images — grilles de photos qui s’adaptent automatiquement.
• Catalogue produits — fiches produits alignées en grille responsive.
• Tableaux de bord — mise en page complexe avec widgets de tailles variables.
• Mise en page magazine — articles de tailles différentes, mise en page éditoriale.

Support navigateur

CSS Grid est supporté par tous les navigateurs modernes depuis 2017 : Chrome, Firefox, Safari, Edge. Le support dépasse 97% des utilisateurs dans le monde, ce qui permet de l’utiliser sans aucune hésitation. Seul Internet Explorer avait un support limité, mais ce navigateur est officiellement mort depuis 2022.

Besoin d’un site web au design professionnel ?