Le futur des mises en page en Mansonry sur le web est arrivé !
Après les bases posées par Mozilla, des années d'efforts de la part de l'équipe WebKit d'Apple et de nombreux débats au sein du groupe de travail CSS avec tous les navigateurs, son fonctionnement est désormais clair.
Voici CSS Grid Lanes pour notre plus grand plaisir !
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}Compatibilité de grid-lanes avec les navigateurs modernes en 2026
Les perspectives de développement des navigateurs suggèrent que le support complet et cohérent pourrait arriver courant 2026, mais aujourd’hui nous sommes encore dans une phase d’exploration et d’implémentations préliminaires dans des versions expérimentales.
display: grid-lanes est très prometteur, mais il n’est pas encore adopté par les navigateurs stables, donc à réserver à l’expérimentation avec des solutions de repli solides.
À ce-jour, seul Safari 26.4 est compatible avec display: grid-lanes (février 2026)
Comment Grid Lanes fonctionne
Voyons en détail comment créer cette mise en page magique et surpuissante (sans JavaScript) pour tes galeries photo.
Tu peux tester dès aujourd'hui cette démo de mises en page de galeries photos dans Safari Technology Preview.
Commençons par le HTML
<main class="container">
<figure><img src="photo-1.jpg"></figure>
<figure><img src="photo-2.jpg"></figure>
<figure><img src="photo-3.jpg"></figure>
<!-- etc -->
</main>On applique d'abord display: grid-lanes à l'élément parent afin de créer un conteneur de type Grid prêt à réaliser ce type de mise en page. Ensuite, nous utilisons grid-template-columns pour créer les « rangées » en exploitant toute la puissance de CSS Grid.
Dans ce cas, on utilise repeat(auto-fill, minmax(250px, 1fr)) pour créer des colonnes flexibles d'au moins 250 pixels de large. Le navigateur décidera du nombre de colonnes à créer, en remplissant tout l'espace disponible.
Ensuite, gap: 20px nous donne des espaces de 20 pixels entre les colonnes et des espaces de 20 pixels entre les éléments à l'intérieur des colonnes.
Voilà le CSS qui tient en 3 lignes, c'est tout !
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}Tout comme dans la bibliothèque Masonry JavaScript classique, le navigateur décide lui-même de placer chaque élément dans la colonne qui le rapproche le plus du haut de la fenêtre. À l'instar du trafic routier, chaque voiture "change de voie" pour se retrouver dans celle qui lui permet d'avancer le plus loin possible.
Essaie-le toi-même !
Utilise le navigateur Safari 26.4 ou + et test Grid Lanes.
Toutes les démos disponibles sur webkit.org/demos/grid3 ont été mises à jour avec la nouvelle syntaxe, y compris d'autres cas d'utilisation de Grid Lanes. Cela ne concerne pas uniquement les images ! Par exemple, un méga menu de pied de page rempli de liens devient soudainement facile à mettre en page.
Et maintenant ?
Il reste quelques décisions à prendre au sein du groupe de travail CSS. Mais dans l'ensemble, la fonctionnalité décrite dans cet article est prête à être utilisée. Il est temps de l'essayer et de s'amuser avec en attendant sa compatibilité officielle avec les navigateurs récents.
BONUS
Découvre aussi la nouvelle fonction CSS appearance: base-select qui te permet de personnaliser une liste sans aucun JavaScript.
Laisser un commentaire