Le tutoriel d'Alsacréations présente l'arrivée de CSS Grid Lanes, une fonctionnalité native du module CSS Grid Level 3 qui simplifie la création de mises en page de type Masonry (comme Pinterest), où les éléments de hauteurs variables s'imbriquent sans espaces vides. Cette solution élimine le recours à des bibliothèques JavaScript comme Masonry.js ou à des astuces CSS peu fiables, offrant une approche performante, accessible et respectueuse de l'ordre du DOM.
L'article explique que Grid Lanes permet de disposer des éléments de manière asynchrone sur l'axe vertical, sans imposer de hauteurs de ligne rigides, contrairement aux grilles traditionnelles. Ses avantages incluent une meilleure performance (pas de recalculs JavaScript), une sémantique HTML préservée et une adaptabilité responsive grâce à des fonctions comme repeat() et auto-fit.
Cependant, la compatibilité reste limitée : il faut activer un flag expérimental dans les navigateurs (Chrome, Firefox, Edge ou Safari) pour tester cette fonctionnalité. L'auteur propose une stratégie de progressive enhancement avec @supports pour garantir un affichage de secours, illustrée par un exemple simple d'implémentation.
