Zones de grille CSS

Introduction

• CSS Grid est pris en charge par tous les principaux navigateurs depuis 2017
• Pourtant, même en 2024, beaucoup de personnes n’utilisent toujours pas la fonctionnalité grid-template-areas
• Cet article vise à expliquer la simplicité et la puissance de grid-template-areas

Zones de grille nommées en CSS

• Dans CSS Grid, chaque zone de grille peut recevoir un nom et être référencée dans l’ensemble du CSS
• Par exemple, il est possible de définir une mise en page en grille avec deux colonnes et d’associer chaque élément à une grid-area

Règles des zones de modèle de grille

• Les zones définies doivent avoir une forme rectangulaire
• Toutes les zones doivent être définies

Syntaxe du modèle de grille

• Il faut utiliser la propriété grid-template-areas pour définir les zones de grille
• Il est possible d’utiliser plusieurs chaînes de zones
• Une seule chaîne correspond à une mise en page unidimensionnelle, tandis que plusieurs chaînes correspondent à une mise en page multidimensionnelle

Lignes de grille nommées en CSS

• Les lignes de grille peuvent recevoir des noms uniques
• Par exemple, dans une grille à 3 colonnes, chaque ligne peut être nommée
• Les lignes de grille nommées ne remplacent pas les numéros de ligne par défaut

Cas d’usage de grid-template-areas

• Inversion du sens de la grille : grid-template-areas permet de modifier facilement l’orientation de la mise en page
• Mise en page d’en-tête : grid-template-areas permet de définir la structure d’un en-tête et de la rendre responsive
• Mise en page éditoriale : il est facile de définir et de modifier des mises en page incluant différents types de contenu

Mise en page conditionnelle et CSS :has()

• Le sélecteur CSS :has() permet de modifier la mise en page selon la présence ou non d’un élément

Prise en charge multilingue (LTR/RTL)

• CSS Grid ajuste la mise en page selon le sens de la page (LTR ou RTL)
• Cela signifie que les zones de grille nommées suivent elles aussi le sens de la page

Zones de grille et DevTools

• Tous les principaux navigateurs offrent de bons outils pour les zones de grille (Chrome, Safari, Firefox)
• Chaque navigateur propose une méthode différente pour visualiser les zones de grille

Résumé de GN⁺

• La fonctionnalité grid-template-areas de CSS Grid est utile pour comprendre visuellement et gérer une mise en page
• Elle est particulièrement utile lorsque des membres de l’équipe doivent modifier la mise en page
• Cet article explique la simplicité et la puissance de grid-template-areas, afin d’encourager davantage de personnes à utiliser cette fonctionnalité
• Parmi les autres projets offrant des fonctionnalités similaires, on trouve Flexbox

[GN⁺]

Avis Hacker News

• La démo animée a suscité de l’intérêt, mais elle n’était pas implémentée en CSS

  • J’ai appris Flexbox et cela m’a suffi, sans jamais ressentir le besoin d’apprendre Grid
  • Il y a des raisons de préférer Grid, mais je n’en ai jamais réellement eu besoin
  • Pour les tableaux de données, j’utilise de vrais tableaux

• Cet article met en avant les avantages de Grid ainsi que la lourdeur de la syntaxe CSS

  • Il y a deux dimensions et trois paramètres (début, fin, taille)
  • Il existe au moins trois façons de déclarer chaque paramètre
  • Les propriétés raccourcies rendent la lecture difficile
  • Il est difficile de lire le Grid écrit par d’autres développeurs

• 1/3 n’est pas une fraction, mais une plage de 1 à 3

  • Je ne comprends pas pourquoi cette syntaxe a été choisie
  • Il existe de meilleures syntaxes pour représenter une plage en programmation (par ex. 1..3)

• À propos de Grid Garden et Flexbox Froggy

  • Grid Garden
  • Flexbox Froggy

• Je n’avais jamais compris Grid ni Flexbox

  • La dernière stratégie de mise en page que j’avais vraiment bien utilisée, c’était les floats
  • Cet article me donne confiance pour utiliser CSS Grid dans mon prochain design de mise en page
  • Merci pour cet article très bien réalisé

• Je me demande s’il existe une version d’introduction préalable de ce document

  • Je me suis perdu dans la partie introductive
  • Je ne comprenais pas ce qu’était un « line number »
  • Je me suis bloqué sur des fractions comme 1/3 et 1/4

• Je recommande vivement Mondrian with auto flow de Jen Simmons

  • Jen Simmons Mondrian
  • C’est vraiment très impressionnant quand on redimensionne la fenêtre
  • J’aimerais comprendre comment l’auto flow détecte et remplit les espaces

• Je me demande pourquoi la syntaxe est définie avec 1/2 et 3/4

  • Une syntaxe comme 1-2 ou 1->2 semblerait plus facile à comprendre

• J’aime les billets de blog interactifs

  • Je recommande d’expérimenter les zones Grid dans l’outil
  • J’utilise Grid Layoutit depuis des années, et l’ajustement des espacements y est bien plus simple

• J’ai l’impression d’avoir compris CSS Grid pour la première fois

  • La numérotation m’a beaucoup aidé
  • Excellent article, auquel je reviendrai souvent