Qu'est-ce que CSS Grid et quand dois-je l'utiliser ?

CSS Grid est un systeme de mise en page bidimensionnel integre dans CSS. Contrairement a Flexbox qui fonctionne le long d'un seul axe a la fois, Grid vous permet de definir simultanement des lignes et des colonnes. Utilisez Grid lorsque vous avez besoin d'un veritable controle bidimensionnel - les mises en page au niveau de la page, les tableaux de bord, les galeries photo ou tout design ou les lignes et colonnes doivent s'aligner les unes avec les autres.

Quelle est la difference entre auto-fill et auto-fit dans CSS Grid ?

Les deux creent autant de pistes que possible. La difference reside dans ce qui se passe lorsque le nombre d'elements est inferieur au nombre de pistes. auto-fill conserve les pistes vides et preserve leur espace, tandis que auto-fit reduit les pistes vides a zero de largeur, permettant aux elements existants de s'etirer pour remplir l'espace restant.

A quoi sert l'unite fr dans CSS Grid ?

L'unite fr (fraction) represente une fraction de l'espace libre disponible dans le conteneur de grille. Par exemple, trois colonnes definies comme 1fr 2fr 1fr signifient que la colonne du milieu obtient deux fois plus d'espace que chacune des colonnes exterieures. Elle fonctionne de facon similaire a flex-grow dans Flexbox.

Puis-je melanger des largeurs fixes et des unites fr dans CSS Grid ?

Oui, et c'est l'une des fonctionnalites les plus puissantes de Grid. Vous pouvez definir une barre laterale a 280px et laisser le contenu principal prendre l'espace restant avec 1fr - le navigateur soustrait d'abord les largeurs fixes, puis distribue l'espace restant en utilisant les ratios fr.

CSS Grid est-il bien supporte par les navigateurs ?

CSS Grid beneficie d'un excellent support des navigateurs. Tous les navigateurs modernes le supportent entierement depuis 2017. Le seul obstacle significatif etait IE 11, qui avait une ancienne implementation avec un prefixe -ms- largement incompatible avec la syntaxe Grid moderne. Si vous ne supportez pas IE 11, vous pouvez utiliser Grid sans reserves.

CSS Grid : Construire des mises en page complexes sans incertitude

Pourquoi Grid m'a pris si longtemps a vraiment apprendre

J'ai evite CSS Grid plus longtemps que je n'aurais du. Flexbox couvrait la plupart de mes besoins, et chaque fois que je parcourais la documentation Grid, je tombais sur des termes comme "pistes implicites" et "lignes de grille nommees" et je fermais tranquillement l'onglet. Cela semblait excessif.

Ce qui m'a fait changer d'avis, c'est d'avoir essaye de construire une mise en page de tableau de bord avec Flexbox. J'avais une barre laterale, un en-tete, une zone de contenu principal et un pied de page, et j'imbriquais des conteneurs flex trois niveaux de profondeur juste pour que les choses s'alignent. Ca fonctionnait - a peine - mais chaque fois que le design changeait, je devais restructurer le HTML. C'est alors que quelqu'un m'a oriente vers Grid, et en environ une heure, j'ai reecrit le tout en 30 lignes de CSS. Le HTML a a peine change.

C'est ce que Grid fait que Flexbox ne peut pas faire : il vous permet de definir la mise en page en deux dimensions a la fois, depuis le conteneur, sans se soucier de l'imbrication des elements. Vous definissez la structure, et les elements s'y insErent.

Ce guide couvre tout ce dont vous avez reellement besoin pour utiliser Grid au quotidien - les proprietes de base, les fonctions bizarres mais utiles, et les modeles que j'ai utilises dans de vrais projets. Si vous voulez experimenter visuellement pendant votre lecture, le CSS Grid Generator sur ToolBox Hubs vous permet de configurer les colonnes, les lignes et les espaces et de voir le CSS genere en temps reel.

Le modele mental

Avant tout code, voici le modele mental : CSS Grid vous demande de penser a la mise en page comme un graphiste pense a une grille de mise en page. Vous definissez une serie de lignes horizontales et verticales, et ces lignes creent des cellules. Ensuite, vous placez le contenu dans ces cellules, ou vous laissez le navigateur le faire automatiquement.

C'est genuinement different de Flexbox, ou la mise en page est determinee par les elements eux-memes - vous definissez des proprietes sur les elements qui leur indiquent comment croitre, retrecir ou s'aligner. Grid inverse cela. La mise en page est definie sur le conteneur, et les elements la suivent.

Definir une grille

Cela commence par une propriete :

.container {
  display: grid;
}

Cela ne fait pas grand chose tout seul. Les elements s'empileront en une seule colonne par defaut. La partie interessante est la definition des pistes.

grid-template-columns et grid-template-rows

Celles-ci definissent les tailles de vos colonnes et rangees. Les valeurs sont une liste de tailles de pistes separees par des espaces.

.container {
  display: grid;
  grid-template-columns: 200px 400px 200px;
  grid-template-rows: 100px auto 60px;
}

Cela cree trois colonnes (200px, 400px, 200px) et trois rangees (100px, la hauteur dont le contenu a besoin, 60px). Les elements sont places dans les cellules de gauche a droite, de haut en bas.

Vous pouvez utiliser n'importe quelle unite de longueur CSS : px, em, rem, %, vw. Mais l'unite la plus utile que Grid a introduite est entierement nouvelle.

L'unite fr

L'unite fr signifie fraction. Elle represente une part de l'espace libre disponible dans le conteneur de grille. Voici pourquoi elle est bien meilleure que les pourcentages :

/* Approche pourcentage - vous devez faire le calcul */
.container {
  display: grid;
  grid-template-columns: 25% 50% 25%;
}

/* Approche fr - vous decrivez simplement les ratios */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Les deux creent la meme mise en page, mais fr gere correctement les espaces. Si vous ajoutez un gap entre les colonnes et utilisez des pourcentages, la largeur totale depasse 100% et vous avez un debordement. Avec fr, le navigateur calcule l'espace libre apres soustraction des espaces, puis le distribue. Beaucoup moins de calcul.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  /* Le navigateur soustrait d'abord les deux espaces de 24px,
     puis divise le reste en ratio 1:2:1 */
}

Vous pouvez egalement melanger des largeurs fixes avec des unites fr, ce qui correspond a la facon dont la plupart des mises en page reelles fonctionnent :

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  /* la barre laterale est toujours 280px, le contenu prend tout le reste */
}

Ce modele - barre laterale fixe, contenu flexible - est celui que j'utilise constamment.

La fonction repeat()

Lorsque vous avez de nombreuses colonnes de largeur egale, les ecrire manuellement devient fastidieux. repeat() est le raccourci :

/* Sans repeat */
.grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Avec repeat */
.grid {
  grid-template-columns: repeat(4, 1fr);
}

repeat(4, 1fr) signifie "quatre pistes, chacune de 1fr de large". Vous pouvez egalement repeter des modeles complexes :

.grid {
  grid-template-columns: repeat(3, 100px 1fr);
  /* Cree : 100px 1fr 100px 1fr 100px 1fr */
}

Mais la version vraiment puissante combine repeat() avec deux mots-cles speciaux.

auto-fill et auto-fit

C'est la que Grid passe de "utile" a "un peu magique". Au lieu de specifier un nombre exact de colonnes, vous pouvez dire au navigateur de creer autant de colonnes que possible :

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 16px;
}

Cela cree une grille qui ajuste automatiquement le nombre de colonnes en fonction de la largeur du conteneur. Sur un grand ecran, vous pourriez obtenir 5 colonnes, sur un ecran etroit, 2. Pas besoin de media queries.

La difference entre auto-fill et auto-fit est subtile mais significative :

auto-fill cree autant de pistes que possible, y compris les vides. Si vous n'avez que 3 elements mais que la grille pourrait accueillir 6 colonnes, vous obtenez 6 colonnes - les 3 dernieres sont vides mais occupent de l'espace.

auto-fit cree egalement autant de pistes que possible, mais reduit les pistes vides a zero de largeur. Si vous avez 3 elements dans une grille qui pourrait en accueillir 6, les pistes vides s'effondrent et vos 3 elements s'etirent pour remplir l'espace disponible.

/* auto-fill : les colonnes vides preservent l'espace */
.fill-grid {
  grid-template-columns: repeat(auto-fill, 200px);
}

/* auto-fit : les elements s'etendent pour remplir le conteneur */
.fit-grid {
  grid-template-columns: repeat(auto-fit, 200px);
}

Lequel utiliser depend du design. Pour une galerie photo ou vous souhaitez que les elements gardent une taille coherente, auto-fill est generalement meilleur. Pour une grille de cartes ou vous voulez que les elements remplissent la rangee, auto-fit est le bon choix.

minmax()

La derniere piece du puzzle est minmax(), qui definit une plage de taille pour une piste plutot qu'une taille fixe. Elle prend deux arguments : une taille minimale et une taille maximale.

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

Cela cree trois colonnes d'au moins 200px de large et d'au plus 1fr de l'espace disponible. Sur un grand ecran, elles s'etendent. Sur un ecran etroit, elles ne deviennent jamais inferieures a 200px.

La combinaison de repeat(), auto-fill ou auto-fit, et minmax() est si courante qu'elle est devenue le modele de grille responsive canonique :

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

Lisez cela comme : "creez autant de colonnes que possible, chacune d'au moins 240px de large, chacune grandissant egalement pour remplir l'espace disponible." Les elements se replient automatiquement. Pas de media queries. Pas de JavaScript. C'est le modele que j'utilise quand j'ai besoin d'une grille de cartes responsive rapidement.

Exemple concret : Galerie photo

Laissez-moi construire une galerie photo de zero pour montrer comment cela se deroule.

<div class="gallery">
  <img src="photo-1.jpg" alt="...">
  <img src="photo-2.jpg" alt="...">
  <!-- more photos -->
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

C'est tout. La grille calcule automatiquement combien de colonnes rentrent dans le conteneur. Les images maintiennent un ratio d'aspect carre en utilisant aspect-ratio et object-fit: cover gere le rognage. Sur mobile, vous pourriez obtenir 2 colonnes, sur un grand bureau, 6. La mise en page est responsive par nature, pas par une liste de points de rupture.

Si vous voulez mettre en avant certaines photos, vous pouvez les etendre sur plusieurs cellules :

.gallery img:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

Cela fait prendre a la premiere photo un bloc 2x2 tandis que tout le reste s'ecoule autour. Pas d'astuces de positionnement, pas de flottants - juste le placement Grid.

Exemple concret : Mise en page tableau de bord

C'est le cas d'utilisation qui m'a convaincu de Grid. Un tableau de bord avec une barre laterale, un en-tete, un contenu principal et un pied de page.

<div class="dashboard">
  <header class="dash-header">Header</header>
  <nav class="dash-sidebar">Sidebar</nav>
  <main class="dash-main">Main Content</main>
  <footer class="dash-footer">Footer</footer>
</div>

.dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  min-height: 100vh;
  gap: 0;
}

.dash-header  { grid-area: header; }
.dash-sidebar { grid-area: sidebar; }
.dash-main    { grid-area: main; }
.dash-footer  { grid-area: footer; }

La propriete grid-template-areas est ce qui rend cela particulierement lisible. Vous dessinez essentiellement la mise en page en art ASCII. L'en-tete et le pied de page s'etendent sur les deux colonnes. La barre laterale fait 260px. Le contenu principal remplit tout le reste.

Rendre cela responsive est simple :

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr 40px;
    grid-template-areas:
      'header'
      'sidebar'
      'main'
      'footer';
  }
}

Sur mobile, tout s'empile dans une seule colonne. La barre laterale se replique sous l'en-tete. Propre.

Grid vs Flexbox : La vraie reponse

Les gens traitent cela comme si vous deviez choisir un camp. Non. Ils resolvent des problemes differents.

Utiliser Grid quand :

Vous avez besoin que les lignes et les colonnes s'alignent les unes avec les autres
Vous construisez une structure au niveau de la page (en-tete, barre laterale, principal, pied de page)
Vous avez besoin que des elements s'etendent sur plusieurs rangees ou colonnes
Vous voulez definir la mise en page depuis le conteneur, pas les elements
Vous construisez une grille coherente de cartes avec des zones de contenu alignees dans chaque carte

Utiliser Flexbox quand :

Vous avez une seule rangee ou colonne d'elements
Les elements doivent se dimensionner en fonction de leur contenu
Vous arrangez des liens de navigation, des boutons ou des entrees de formulaire en ligne
Les elements doivent se replier mais vous ne vous souciez pas de l'alignement entre les rangees

Dans la plupart des projets, j'utilise les deux. Grid gere le squelette de la page. Flexbox gere les composants internes - la barre de navigation, le groupe de boutons dans une carte, la mise en page du formulaire. Ils se complementent, ils ne sont pas en competition.

La regle la plus claire que j'ai entendue : "Grid est pour la mise en page. Flexbox est pour l'alignement." C'est une simplification, mais elle vous guidera correctement la plupart du temps.

Utiliser le CSS Grid Generator

Si vous construisez une mise en page en grille et que vous voulez voir le resultat avant de le valider dans le code, le CSS Grid Generator sur ToolBox Hubs vaut la peine d'etre ouvert. Vous pouvez definir le nombre de colonnes et de rangees, ajuster l'espacement, configurer visuellement les tailles de colonnes et de rangees, et obtenir exactement le CSS a coller dans votre projet.

C'est particulierement utile lorsque vous travaillez avec grid-template-areas - visualiser quelles zones couvrent quelles cellules est beaucoup plus facile avec un outil visuel qu'en regardant le code. Vous configurez la mise en page une fois, copiez le CSS et l'inserez. Plus rapide que d'ecrire a la main, et un bon moyen de tester rapidement une idee de mise en page avant de la construire.

Support des navigateurs et vrais mises en garde

Grid a un fort support des navigateurs - chaque navigateur moderne a un support complet depuis 2017. Vous n'avez pas besoin de prefixes de fournisseur. Vous n'avez pas besoin d'un polyfill. Ecrivez-le, livrez-le.

La seule vraie mise en garde : Internet Explorer 11. IE 11 a une ancienne implementation de Grid (basee sur un brouillon de specification precoce) utilisant des proprietes prefixees -ms- qui sont largement incompatibles avec la syntaxe Grid moderne. Si vos analyses montrent du trafic IE 11 qui vous importe, l'utilisation de Grid necessite une consideration attentive ou une solution de repli.

Pour ceux qui ne supportent pas IE 11 - ce qui, honnêtement, est la plupart d'entre nous maintenant - Grid est pret pour la production sans mises en garde.

Une propriete a surveiller : subgrid. Elle permet aux grilles enfants d'heriter et de participer aux definitions de piste de la grille parente, ce qui est utile pour aligner le contenu imbrique. Safari a ajoute le support en 2023, Chrome fin 2023. Au debut 2026, le support est solide dans l'ensemble, mais si vous construisez sur des projets avec des navigateurs plus anciens dans la portee, verifiez vos cibles specifiques.

Les proprietes que vous utiliserez vraiment

Apres avoir travaille avec Grid sur plusieurs projets, voici les proprietes que j'utilise le plus :

/* La definition de base */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-template-rows: auto;

/* Zones nommees pour les mises en page complexes */
grid-template-areas: 'header' 'sidebar main' 'footer';

/* Placer les elements */
grid-column: span 2;
grid-row: span 2;

/* Ou placement explicite */
grid-column: 1 / 3; /* commence a la ligne 1, se termine a la ligne 3 */
grid-row: 2 / 4;

/* Espacement */
gap: 24px;
column-gap: 24px;
row-gap: 16px;

Les proprietes de grille implicites (grid-auto-rows, grid-auto-columns) valent aussi la peine d'etre connues. Lorsque des elements sont auto-places dans des rangees qui n'etaient pas explicitement definies, grid-auto-rows definit leur hauteur :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px; /* toutes les rangees auto-placees font 200px de haut */
}

Et si vous voulez que les elements auto-places remplissent les colonnes plutot que les rangees, grid-auto-flow: column inverse la direction de placement.

Ce qui a clique pour moi

Le moment ou Grid a cesse de sembler intimidant, c'est quand j'ai cesse d'essayer de memoriser chaque propriete et que j'ai simplement interiorise trois choses :

Vous definissez les colonnes et les rangees sur le conteneur, pas sur les elements.
L'unite fr distribue l'espace libre proportionnellement.
repeat(auto-fill, minmax(min, 1fr)) est le modele pour les grilles responsives.

Tout le reste - zones nommees, extension, placement explicite - vous pouvez le consulter si besoin. Mais ces trois concepts vous permettent de passer 80% de l'utilisation reelle de Grid.

CSS Grid est l'un de ces outils qui semble faire le travail pour vous une fois que vous le comprenez. Une mise en page qui aurait necessité 50 lignes de flottants ou de flexbox profondement imbriques en 2015 prend maintenant 10 lignes de Grid. C'est une veritable amelioration de la qualite de vie, et apres un moment, vous aurez du mal a vous souvenir de ce que la mise en page ressemblait avant.