Étendues de colonnes et imbrication

Sur une grille CSS, un élément revendique sa largeur sous forme d’étendue : grid-column: span 4 — ou une classe utilitaire .col-4 — occupe quatre colonnes du palier courant, gouttières internes comprises. Construire une page sur une grille, c’est l’arithmétique des étendues (les sections divisent les douze colonnes du bureau en motifs comme 8 + 4 ou 4 + 4 + 4) plus le jugement derrière l’arithmétique : d’abord la largeur du contenu, ensuite la hiérarchie, enfin l’alignement.

La grille définit les colonnes ; les étendues décident de ce qui s’y pose. Cet article couvre la grammaire des étendues, la poignée de motifs dont sont faites la plupart des pages, les trois décisions derrière une étendue, ce qu’une grille imbriquée hérite ou non, et ce qu’il advient des étendues sur un téléphone — la couche de composition de la grille de mise en page.

Que fait réellement grid-column: span N ?

La propriété grid-column place un élément sur les lignes de colonnes de la grille, et le mot-clé span en est la forme relative : occuper N pistes à partir de l’endroit où l’élément atterrit. Une étendue est une revendication de largeur en unités de colonnes, pas en pixels — un élément span-4 occupe quatre colonnes plus les trois gouttières qui les séparent.

Avec des valeurs de bureau courantes (conteneur de 1200px, marges de 66px, gouttières de 24px, douze colonnes de 67px chacune), span 4 donne 4 × 67 + 3 × 24 = 340px et span 8 donne 704px. La même revendication produit des largeurs réelles différentes selon les paliers — c’est précisément ce qui rend les étendues portables là où les largeurs en pixels ne le sont pas.

Quels motifs d’étendue couvrent la plupart des pages ?

Un court vocabulaire revient dans la plupart des mises en page à douze colonnes :

Ces motifs reviennent parce que 12 a de nombreux diviseurs — moitiés, tiers et quarts tombent tous sur des colonnes entières, et les paires asymétriques (5 + 7, 8 + 4) s’additionnent tout de même proprement.

Comment choisir une étendue ?

D’abord la largeur du contenu. Partez de ce dont le contenu a besoin, puis convertissez. Une barre latérale est confortable autour de 300px : avec les valeurs de bureau ci-dessus, span 4 donne 340px — de quoi respirer — tandis que span 3 donne 249px, trop juste pour autre chose que des liens. Une ligne de texte courant se lit le mieux aux alentours de 45 à 75 caractères, ce qui, à 16px, se situe dans le territoire des span-7 à span-8. L’étendue est la conversion d’un besoin de contenu en unités de colonnes, pas un nombre choisi pour sa propre élégance.

Ensuite la hiérarchie. La largeur se lit comme de l’importance : dans une mise en page 8 + 4, peu de lecteurs confondent la barre latérale avec l’essentiel. Si deux zones comptent autant, 6 + 6 le dit ; sinon, leur donner une largeur égale induit discrètement en erreur.

Enfin l’alignement. Les étendues qui partagent des lignes de grille créent les bords verticaux qui donnent à une page une impression de structure. Dans l’empilement 8 + 4 au-dessus de 4 + 4 + 4, la frontière article–barre latérale tombe sur la même ligne que le bord gauche de la troisième carte — un bord continu tout le long de la page. L’intuition derrière : l’œil lit les bords partagés comme une structure intentionnelle, et lit les quasi-ratés comme de la négligence — un bord qui s’aligne presque dérange souvent plus qu’un bord qui ne s’aligne clairement pas, parce qu’il ressemble à une tentative ratée du premier.

Voyez ces motifs en direct sur la grille par défaut dans Scale Composer — les rangées 8 + 4, 6 + 6 et 4 + 4 + 4 sur le palier bureau à douze colonnes, avec les bords partagés visibles là où les motifs s’empilent.

Une grille imbriquée hérite-t-elle de la grille de page ?

Non — et savoir exactement ce qui se transmet évite les surprises courantes. Tout élément doté d’une étendue peut déclarer display: grid et héberger sa propre grille, mais les pistes de la grille interne lui appartiennent entièrement : elle n’hérite d’aucun nombre de colonnes, d’aucune position de ligne, de rien de géométrique. Les propriétés personnalisées, elles, s’héritent, si bien qu’un gap: var(--grid-gutter) interne reprend la gouttière du palier — les nombres descendent ; les pistes, non. Une conséquence bonne à connaître : un partage égal d’une étendue paire, avec la même gouttière, retombe sur les lignes de colonnes de la page (la moitié d’un article span-8 fait exactement la largeur d’un span-4), mais la plupart des autres divisions internes dérivent complètement hors de la grille de page.

La question la plus utile est de savoir si la grille de page a seulement sa place à l’intérieur d’un composant. En général non : le rôle de la grille de page est de positionner les composants, et l’intérieur d’un composant est régi par sa propre logique de padding et de gap. Une carte n’a pas besoin de savoir qu’elle repose sur une page à douze colonnes ; elle a besoin d’un espacement interne cohérent où qu’on la place. Préserver cette frontière est ce qui permet aux composants de passer d’une mise en page à l’autre sans renégociation.

La véritable exception est l’alignement entre éléments frères : faire en sorte que les titres, prix et boutons de trois cartes voisines reposent sur des rangées partagées quelle que soit la longueur du contenu. C’est à cela que sert subgrid — une grille imbriquée qui adopte les pistes de son parent au lieu de définir les siennes. C’est l’outil le plus récent de cet article, avec une prise en charge des navigateurs large mais relativement récente, alors vérifiez votre socle de compatibilité avant de vous y fier.

Qu’advient-il des étendues sur un téléphone ?

Les étendues sont des décisions par palier, et il y a deux façons de les prendre.

Par défaut, c’est le plafonnement intégré aux classes d’étendue de la grille : grid-column: span min(N, var(--grid-cols)) plafonne chaque revendication au nombre de colonnes du palier, si bien qu’un 8 + 4 de bureau devient deux rangées pleine largeur sur un téléphone à quatre colonnes — un empilement propre, écrit nulle part. Le plafonnement est le bon choix chaque fois que « tout en pleine largeur » est la bonne réponse sur petit écran, ce qui, pour les pages portées par le texte, est généralement le cas.

Redéfinir explicitement les étendues prend le relais lorsque le repli demande une direction artistique. Une paire 6 + 6 sur une tablette à huit colonnes se plafonne à 6 + 6 — mais 6 + 6 > 8, donc les deux éléments passent sur des rangées séparées à six colonnes sur huit chacun : en dents de scie, pas empilé. Une seule media query les redéclarant en span 4 + 4 (côte à côte) ou 8 + 8 (empilement pleine largeur) énonce l’intention. Le plafonnement est une dégradation gracieuse ; redéfinir les étendues, c’est du design.

Comment une rangée de cartes se comporte-t-elle du bureau au téléphone ?

Suivez trois cartes .col-4 à travers les paliers par défaut :

Le bureau et le téléphone sortent exactement comme prévu, gratuitement. La rangée tablette est le cas honnête : le plafonnement garantit que rien ne déborde, mais trois cartes span-4 sur huit colonnes se replient en 2 + 1, laissant une orpheline. Si cela gêne le design, c’est une seule règle explicite à ce palier — donnez à la troisième carte span 8 en guise de clôture pleine largeur, ou passez les trois en pleine largeur — dans les deux cas, l’exception est une ligne, pas un système.

Regardez une étendue se plafonner en direct

Le plafonnement est plus facile à croire une fois qu’on l’a vu à l’œuvre. Chargez le motif 8 + 4 et faites avancer l’aperçu du bureau à la tablette puis au téléphone : les étendues tiennent à douze et à huit colonnes, puis se replient en pleine largeur à quatre — regardez les étendues de bureau se plafonner en empilement téléphone dans Scale Composer.