CSS Grid Lanes, ou le retour de Masonry

Pendant plus d'une décennie, concevoir une mise en page de type « Pinterest », où des éléments de hauteurs variables s'imbriquent parfaitement les uns sous les autres sans laisser d'espaces vides, relevait du parcours du combattant. Il fallait soit capituler et charger une bibliothèque JavaScript (la célèbre extension Masonry.js de David DeSandro), soit se résoudre à utiliser des astuces CSS bancales comme les colonnes CSS (columns) au prix d'un ordre de lecture totalement inversé.

Bonne nouvelle : après de longues années de débats passionnés au sein du CSS Working Group, les planètes se sont enfin alignées. La spécification CSS Grid Layout Module Level 3 introduit officiellement une solution native sous le nom de Grid Lanes. Finies les contorsions de code, place à une approche robuste, performante et accessible.

Qu'est-ce que c'est, et quels besoins ça résout ?

Le concept de Masonry (ou mise en page en cascade) consiste à disposer des éléments les uns après les autres au sein de colonnes prédéfinies, mais de façon asynchrone sur l'axe vertical. Contrairement à une grille tr...
[Courte citation de 8% de l'article original]