CSS Grid

Ce qu'est CSS Grid

CSS Grid est un système de mise en page intégré à CSS qui organise le contenu en deux dimensions à la fois, lignes et colonnes, sur une grille que vous définissez. Là où les techniques antérieures obligeaient les designers à empiler des flottants et des marges astucieuses, Grid vous laisse décrire directement la structure d'une page : tant de colonnes, telles hauteurs de lignes, tel élément couvrant deux cellules. C'est l'outil de mise en page natif le plus puissant du web, et il a rendu pratiques des mises en page complexes, dignes d'un magazine, sans bricolage.

La différence clé avec les anciennes méthodes tient à l'intention. Avec Grid, vous déclarez la mise en page voulue et le navigateur y place les éléments, au lieu de pousser des éléments jusqu'à ce qu'ils s'alignent par chance. Cela rend les designs plus faciles à construire et à faire évoluer.

Le changement mental qu'introduit Grid consiste à penser la mise en page comme un plan plutôt que comme un flux. Vous dessinez d'abord la structure, en décidant du nombre de colonnes et de lignes de la page, puis vous y placez le contenu là où il doit aller. C'est bien plus proche de la façon dont les designers raisonnent déjà sur le papier, ce qui explique en partie pourquoi Grid a tant réduit l'écart entre une maquette et sa mise en oeuvre.

Comment fonctionne CSS Grid

Vous créez une grille en transformant un élément en conteneur de grille, puis en définissant ses pistes, les colonnes et les lignes qui forment la structure. Les éléments sont ensuite placés dans les cellules que ces pistes créent.

• grid-template-columns : définit le nombre de colonnes et la largeur de chacune.
• grid-template-rows : définit la structure des lignes de la même manière.
• gap : fixe un espacement régulier entre lignes et colonnes.
• grid-column et grid-row : permettent à un élément de couvrir plusieurs pistes.

Une unité spéciale, la fraction (fr), partage l'espace restant proportionnellement, si bien qu'une mise en page peut être entièrement fluide. Combinée aux fonctions minmax et repeat, Grid construit des structures responsive qui se réorganisent sans une media query pour chaque point de rupture.

À quoi sert CSS Grid

Grid excelle à la structure de page : en-têtes, barres latérales, contenu principal et pieds de page disposés selon un plan délibéré. C'est le choix naturel pour les tableaux de bord, les galeries d'images, les grilles tarifaires et tout design où l'on raisonne en plan à deux dimensions plutôt qu'en une seule ligne.

Comme on peut placer les éléments avec précision, Grid gère aussi les designs asymétriques et les chevauchements, autrefois pénibles. Un élément peut commencer en deuxième colonne et s'étirer sur trois lignes, le reste de la grille s'y adaptant simplement, ce qui ouvre la voie à des mises en page plus éditoriales et moins rigides.

L'un des tours les plus utiles de Grid est de bâtir des mises en page responsive avec presque aucune media query. Une seule ligne combinant les fonctions repeat et minmax peut dire au navigateur de loger autant de colonnes qu'il en tient confortablement, puis de faire passer le reste sur de nouvelles lignes automatiquement. Une galerie de cartes construite ainsi se réorganise de quatre colonnes sur un écran de bureau à une seule sur un téléphone sans que vous écriviez une règle par point de rupture.

CSS Grid et Flexbox

Grid et Flexbox répondent à des questions différentes. Flexbox est à une dimension et guidé par le contenu : il répartit une ligne ou une colonne d'éléments selon leur taille. Grid est à deux dimensions et guidé par la mise en page : vous définissez d'abord la structure puis y placez le contenu. Aucun ne remplace l'autre.

Le schéma courant consiste à utiliser Grid pour le squelette global de la page et Flexbox pour les composants de chaque zone, comme une barre de navigation ou la mise en page interne d'une carte. Ils s'imbriquent volontiers, donc la plupart des projets réels emploient les deux, en choisissant l'outil adapté à la forme du problème.

Les zones de grille nommées vont plus loin en vous laissant esquisser dans le code une mise en page qui se lit presque comme une image. Vous attribuez des noms à des régions, comme en-tête, barre latérale et contenu principal, puis vous les disposez visuellement dans un modèle. Réarranger toute la page pour le mobile revient alors à redessiner ce modèle, ce qui garde des mises en page responsive complexes lisibles et faciles à maintenir des mois plus tard.

CSS Grid dans les outils no-code

Nul besoin d'écrire du CSS pour profiter de Grid. Webflow et Framer exposent les grilles visuellement, en vous laissant régler colonnes, lignes et espacements dans un panneau pendant que l'outil génère le CSS sous-jacent. Comprendre les pistes, les fusions de cellules et l'unité fraction rend ces panneaux bien plus utiles, car vous savez ce que fait chaque contrôle.

Cela compte pour quiconque construit des sites sans code. Un designer qui saisit Grid peut créer dans un éditeur visuel des structures précises et responsive qui paraîtraient sinon imprévisibles, et raisonner sur le pourquoi d'un comportement de mise en page.

CSS Grid chez BeBranded

Chez BeBranded, nous recourons à CSS Grid dès qu'un design réclame une structure à deux dimensions délibérée, des pages marketing aux tableaux de bord, que nous écrivions le CSS ou le construisions visuellement dans Webflow. Grid nous donne des squelettes de page propres et responsive qui tiennent d'un point de rupture à l'autre, et nous le combinons à Flexbox pour les composants de chaque zone. Le résultat pour le client est un site dont la mise en page est intentionnelle et robuste, facile à étendre avec de nouvelles sections, et débarrassé des astuces d'espacement fragiles qui rendaient jadis les refontes pénibles.