CSS Grid Lanes : le masonry natif dans Safari

La disposition masonry, cette grille décalée à la Pinterest où des éléments de toutes tailles s’écoulent dans l’espace disponible, est en production depuis plus d’une décennie, portée par des bibliothèques JavaScript, des float et des bricolages Flexbox qui fonctionnent presque, jusqu’au moment où ils ne fonctionnent plus.¹ À la WWDC 2026, l’équipe Safari d’Apple a offert au web un mode de disposition natif pour cela : CSS Grid Lanes. Le motif masonry est ancien. Ce qui est nouveau, c’est un display type CSS de première classe qui le produit en trois lignes, plus un réglage flow-tolerance qui corrige le problème chronique d’ordre de tabulation et d’accessibilité du masonry. Grid Lanes est disponible dès aujourd’hui dans Safari 26.4 et derrière un drapeau dans les autres navigateurs.¹

TL;DR

• Grid Lanes est un nouveau mode de disposition CSS qui se situe entre Grid et Flexbox : il structure un seul axe et laisse l’autre libre, répartissant le contenu sur plusieurs lanes pour former une disposition décalée et densément tassée qui préserve les proportions naturelles de chaque élément.¹
• Tout tient en trois lignes : display: grid-lanes, un grid-template-columns avec des pistes en fr, et gap. Remplacez grid-template-columns par grid-template-rows pour transformer une cascade en un mur de briques. Vous choisissez une seule direction, pas les deux.¹
• Le dimensionnement des pistes est repris de Grid : des ratios fr inégaux, auto-fill avec minmax() pour un nombre de colonnes responsive, et des motifs répétés alternant colonnes étroites et larges.¹
• Les éléments utilisent des propriétés Grid que vous connaissez déjà : grid-column: span 2 pour élargir, le placement explicite des colonnes, et grid-template-columns: subgrid pour intégrer le contenu d’une carte dans la disposition parente. Vous contrôlez le placement des colonnes, pas celui des lignes ; c’est Grid Lanes qui décide de la ligne.¹
• flow-tolerance est le véritable facteur de différenciation. Un placement purement basé sur la colonne la plus courte peut faire zigzaguer l’ordre de tabulation par rapport à l’ordre visuel, ce qui nuit à l’accessibilité. flow-tolerance (valeur par défaut 1em) assouplit la règle de la colonne la plus courte afin que le placement suive de plus près l’ordre de lecture.¹
• La disponibilité est annoncée honnêtement : Safari 26.4 l’embarque dès aujourd’hui, les autres navigateurs le verrouillent derrière un drapeau. Grid Lanes n’est pas encore en disponibilité générale multinavigateur.¹

Où Grid Lanes se situe entre Grid et Flexbox

Brandon, de l’équipe Safari, construit une disposition Grid Lanes à partir de zéro, à partir de 3:39.

Chaque mode de disposition répond aux deux mêmes questions : où vont les éléments, et combien d’espace reçoivent-ils ?¹ Flexbox et Grid y répondent différemment, et Grid Lanes vient se placer entre les deux.

Flexbox vous donne un seul axe et une unique lane d’éléments s’écoulant le long de celui-ci ; lorsque les éléments passent à la ligne, ils continuent de s’écouler dans la direction choisie, en ligne ou en colonne.¹ Grid vous donne deux axes, des colonnes et des lignes, et place les éléments dans des cellules à l’intersection de ces pistes. Le problème surgit lorsque les éléments ont des rapports d’aspect différents : vous obtenez de grandes zones vides là où les éléments plus courts ne parviennent pas à remplir leurs cellules.¹ Pour les images, cela ne laisse que trois mauvaises options. Étirez chaque image pour qu’elle remplisse sa cellule et vous la déformez ; zoomez pour combler l’espace et l’image déborde de son conteneur ; recadrez-la et vous risquez de perdre des informations importantes.¹

Grid Lanes résout cette tension. Comme le formule la session : « Il se situe entre Grid et Flex. Au lieu de structurer selon deux dimensions comme Grid, il n’en structure qu’une seule et laisse l’autre libre. Mais contrairement à Flex, où le contenu s’écoule dans une seule lane et revient à la ligne au fil de la page, Grid Lanes répartit le contenu sur plusieurs lanes. »¹ Les éléments sont placés un par un, et chacun atterrit dans la colonne qui le laisse au plus près du haut, ce qui explique pourquoi les premiers éléments se trouvent plus haut et les suivants viennent remplir en dessous.¹ La disposition fonctionne avec n’importe quel contenu, pas seulement les images : les blocs de texte reviennent à la ligne pour s’adapter à leur colonne et le navigateur en calcule les hauteurs, et un titre peut s’étendre sur plusieurs colonnes pour ressortir.¹

Le masonry natif en trois lignes de CSS

La construction commence par un nouveau display type, puis définit les pistes exactement comme le fait Grid :

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

grid-template-columns fixe le nombre de pistes et la largeur de chacune. L’unité fr (« fractional unit ») indique au navigateur de prendre l’espace disponible dans le conteneur et de le diviser en fractions, si bien que 1fr 1fr 1fr produit trois colonnes de taille égale, et gap ajoute de l’espacement exactement comme dans Grid.¹ Pour transformer la cascade en mur de briques, échangez les colonnes contre des lignes : remplacez grid-template-columns par grid-template-rows et les éléments s’écoulent en travers, par rangées, au lieu de descendre en colonnes. Le seul piège, selon les mots de la session : « vous choisissez une seule direction, pas les deux. »¹

Ces trois lignes offrent plus de contrôle qu’il n’y paraît. Les colonnes n’ont pas à être égales : une colonne centrale peut prendre deux fois l’espace de ses voisines. Plutôt que de fixer vous-même le nombre de colonnes, vous pouvez laisser le navigateur décider, exactement comme le font déjà les dispositions Grid responsives :

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

auto-fill crée autant de colonnes qu’il en tient, et minmax() indique que chacune doit faire au moins 200 pixels mais peut s’agrandir pour combler l’espace.¹ Vous pouvez pousser la même idée plus loin avec un motif répété de colonnes étroites et larges. Le bénéfice que souligne Brandon : « ce que j’aime le plus, c’est tout ce qu’on peut faire avec seulement quelques lignes de CSS. »¹

Façonner les éléments individuels avec des propriétés Grid que vous connaissez

Grid Lanes façonne les éléments avec des propriétés qui existent déjà dans Grid. Partez d’un conteneur grid-lanes à trois colonnes égales. Pour donner plus d’espace à un élément, grid-column: span 2 l’étire sur deux colonnes et le reste de la disposition s’ajuste autour de lui.¹ Vous pouvez aussi le placer précisément : faites-le commencer à la colonne 2 et s’étendre sur les colonnes 2 et 3. La contrainte est délibérée : « vous pouvez contrôler le placement des colonnes, mais pas celui des lignes. C’est Grid Lanes qui décide de la ligne pour vous. »¹

subgrid intègre le contenu d’un composant imbriqué dans le parent. Une carte de recette qui s’étend sur deux colonnes contient une image et du texte qui, par défaut, ne participent pas à la disposition Grid Lanes. Ajoutez display: grid-lanes et grid-template-columns: subgrid à la carte, et « son contenu rejoint la disposition parente en tant qu’éléments à part entière » : l’image occupe une colonne, le texte l’autre, chacun dimensionné selon son contenu.¹ L’imbrication fonctionne dans les deux sens, une grille classique à l’intérieur d’un conteneur Grid Lanes ou l’inverse, car les mêmes outils et la même syntaxe se transposent.¹

Le réglage flow-tolerance : la solution d’accessibilité

Voici la partie qui fait de Grid Lanes bien plus qu’un masonry plus soigné. Un placement purement basé sur la colonne la plus courte est superbe la plupart du temps, mais parfois quelque chose ne semble pas tout à fait juste, et la raison tient à l’accessibilité.¹

Imaginez deux éléments sur une même rangée, à des hauteurs presque identiques, où l’élément 2 est de quelques pixels plus court que l’élément 1. La zone sous l’élément 2 se trouve plus près du haut, le navigateur y place donc l’élément suivant, et l’élément 4 vient remplir la première colonne. Le résultat visuel se lit de gauche à droite sur la première rangée et de droite à gauche sur la dernière. Comme le dit la session : « L’écart entre l’ordre de tabulation et la façon dont le contenu apparaît visuellement affectera l’accessibilité pour les utilisateurs et peut créer une expérience déroutante. »¹ L’ordre de tabulation suit l’ordre du source ; le placement visuel en zigzag rompt la correspondance sur laquelle s’appuient les utilisateurs de clavier et de lecteur d’écran.

flow-tolerance est le réglage qui assouplit ou resserre la règle de la colonne la plus courte.¹ Une fois activé, le navigateur se pose pour chaque nouvel élément la question suivante : « la colonne la plus haute est-elle inférieure à la colonne la plus courte additionnée de flow-tolerance ? »¹ Si l’écart reste dans la tolérance, l’élément remplit la colonne qui maintient le placement aligné sur l’ordre de lecture ; dès que l’écart devient trop grand pour être ignoré, l’élément bascule dans la colonne réellement plus courte. La valeur par défaut est 1em :

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr;
  flow-tolerance: 1em;
}

Le conseil d’Apple est d’« essayer différentes valeurs de flow-tolerance pour trouver celle qui convient à votre contenu. »¹ La contrepartie de cette flexibilité accordée au navigateur, c’est que le résultat peut parfois vous surprendre, et quand cela arrive, le Web Inspector prend Grid Lanes entièrement en charge : activez la superposition et vous obtenez des lignes pour les colonnes et les rangées, des numéros d’ordre projetés sur chaque élément pour voir exactement comment le placement s’est produit, et les écarts dessinés entre les éléments.¹

Points clés à retenir

Pour les développeurs front-end : - Remplacez les bibliothèques JavaScript de masonry et les bricolages Flexbox par display: grid-lanes, trois pistes en fr et gap ; réutilisez les outils de dimensionnement de pistes de Grid (auto-fill, minmax(), des fr inégaux) que vous connaissez déjà.¹ - Recourez à grid-column: span N et au placement explicite des colonnes pour mettre des éléments en avant, et à grid-template-columns: subgrid pour intégrer le contenu d’une carte imbriquée dans la disposition parente.¹

Pour les équipes soucieuses d’accessibilité : - Ajustez flow-tolerance (valeur par défaut 1em) pour que le placement visuel suive l’ordre du source et de tabulation, comblant l’écart que le placement masonry en zigzag ouvre pour les utilisateurs de clavier et de lecteur d’écran.¹ - Vérifiez le placement avec la superposition Grid Lanes du Web Inspector, qui projette les numéros d’ordre des éléments directement sur la disposition.¹

Pour les responsables techniques qui planifient le déploiement : - Traitez Grid Lanes comme « disponible dans Safari 26.4, sous drapeau ailleurs, pas en disponibilité générale multinavigateur » ; déployez-le en amélioration progressive avec un repli élégant pour les navigateurs encore derrière le drapeau.¹

FAQ

Qu’est-ce que CSS Grid Lanes ?

CSS Grid Lanes est un nouveau mode de disposition introduit par l’équipe Safari à la WWDC 2026 pour construire nativement des dispositions de style masonry. Il se situe entre Grid et Flexbox : il structure un axe et laisse l’autre libre, répartissant les éléments sur plusieurs lanes pour former une disposition décalée et densément tassée qui préserve les proportions naturelles de chaque élément.¹

Comment construire une disposition masonry avec Grid Lanes ?

Trois lignes de CSS : définissez display: grid-lanes, déclarez les pistes avec grid-template-columns en unités fr (par exemple 1fr 1fr 1fr pour trois colonnes égales) et ajoutez un gap. Remplacez grid-template-columns par grid-template-rows pour transformer une cascade verticale en un mur de briques horizontal. Vous choisissez une seule direction, pas les deux.¹

À quoi sert flow-tolerance ?

flow-tolerance assouplit ou resserre la règle qui place chaque élément dans la colonne la plus courte. Un placement purement basé sur la colonne la plus courte peut faire zigzaguer l’ordre visuel par rapport à l’ordre de tabulation, ce qui nuit à l’accessibilité. Avec flow-tolerance activé, le navigateur vérifie si la colonne la plus haute est inférieure à la colonne la plus courte additionnée de la tolérance avant de décider du placement, gardant les éléments alignés sur l’ordre de lecture jusqu’à ce que l’écart de hauteur devienne trop grand. La valeur par défaut est 1em.¹

Puis-je utiliser Grid Lanes en production dès aujourd’hui ?

Dans Safari 26.4, il est disponible dès maintenant. Les autres navigateurs le verrouillent derrière un drapeau, Grid Lanes n’est donc pas encore en disponibilité générale multinavigateur. Déployez-le en amélioration progressive avec un repli pour les navigateurs qui exigent encore le drapeau.¹

Grid Lanes fonctionne-t-il avec les propriétés Grid que je connais déjà ?

Oui. Le placement au niveau des éléments utilise des propriétés Grid existantes : grid-column: span 2 élargit un élément, le placement explicite des colonnes le positionne, et grid-template-columns: subgrid intègre le contenu d’un composant imbriqué dans la disposition parente. Vous contrôlez le placement des colonnes ; c’est Grid Lanes qui décide de la ligne.¹

Pour une référence pratique une fois que vous commencez à construire, WebKit maintient un guide de terrain officiel sur Grid Lanes à l’adresse gridlanes.webkit.org. Le panel a noté que Grid Lanes se compose avec le nouveau select personnalisable : une disposition masonry fonctionne à l’intérieur d’un menu déroulant ::picker(select).²

Grid Lanes est le genre d’ajout de plateforme qui supprime une dépendance plutôt que d’en ajouter une, ce qui est tout l’argument du manifeste no-build et une voie directe vers le type de résultat relaté dans le compte rendu du score Lighthouse parfait. Livrer une disposition native et sémantique au lieu de grilles rendues en JavaScript garde aussi votre balisage lisible par les machines, l’argument défendu dans HTML est le format que veulent les agents. Le portail complet de la série est la série Apple Ecosystem.

Références