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 traditionnelle où chaque ligne impose sa hauteur à l'ensemble de ses cellules, le mode Masonry s'affranchit des contraintes de rangées rigides.

Les objectifs majeurs résolus par l'arrivée native de display: grid-lanes sont multiples :

• Performance accrue : Aucun calcul JavaScript lors du redimensionnement (resize) de la fenêtre ou du chargement des images.
• Respect de l'ordre du DOM : Les éléments se positionnent de manière fluide en suivant une logique ordonnée, sans nécessiter de conteneurs de colonnes rigides (qui cassent la sémantique HTML).
• Souplesse du responsive : La possibilité de combiner la puissance des fonctions Grid (comme repeat() et auto-fit) avec un comportement fluide à hauteur variable.

La compatibilité actuelle

Le paysage des implémentations s'est enfin stabilisé après l'adoption d'une syntaxe unifiée, mais à ce jour le support navigateur est infime. Il est nécessaire d'actviter un flag afin de pouvoir tester cette fonctionnalité.

Activer le flag expérimental

Pour tester display: grid-lanes dès aujourd'hui, vous devez activer le flag correspondant dans votre navigateur :

• Chrome / Edge : ouvrez chrome://flags (ou edge://flags), recherchez CSS Grid Lanes, puis activez le flag et redémarrez le navigateur.
• Firefox : ouvrez about:config, recherchez layout.css.grid-lanes.enabled, passez la valeur à true.
• Safari : allez dans Safari → Réglages → Avancé → Afficher le menu Développement, puis dans le menu Développement → Fonctionnalités expérimentales, cochez CSS Grid Lanes.

Une fois le flag activé, la valeur grid-lanes pour display sera reconnue par le navigateur.

Stratégie d'amélioration progressive

Pour exploiter cette fonctionnalité dès aujourd'hui tout en garantissant un affichage de secours propre (fallback), la directive @supports est notre meilleure alliée :

/* Fallback pour les anciens navigateurs (affichage en colonnes CSS) */
.galerie {
  columns: 3 200px;
  column-gap: 1rem;
}

/* Modernité avec Grid Lanes */
@supports (display: grid-lanes) {
  .galerie {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

La mise en œuvre et exemple simple

L'implémentation est déconcertante de simplicité. Il suffit d'appliquer la valeur grid-lanes à la propriété display du conteneur parent, puis de définir l'axe structurel (le plus souvent les colonnes).

Le code HTML

<div class="masonry-container">
  <article class="card">Contenu court.</article>
  <article class="card">Contenu beaucoup plus long qui va s'étendre verticalement…</article>
  <article class="card">Contenu moyen.</article>
</div>

Le code CSS

.masonry-container {
  display: grid-lanes;
  /* Définition automatique des couloirs verticaux */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.card {
  background: #ffffff;
  border: 1px solid hotpink;
  padding: 1rem;
  border-radius: 8px;
}

Dans cet exemple, le navigateur va calculer la hauteur réelle de chaque .card et positionner automatiquement la carte suivante dans la colonne qui dispose actuellement de l'espace vide le plus proche du sommet.

Voir la démo interactive

Distribution verticale ou horizontale ?

Suivant l'axe que vous décidez de verrouiller, le comportement de Grid Lanes se décline en deux grandes variations visuelles.

Distribution verticale (waterfall)

C'est l'usage classique popularisé par Pinterest. On définit des colonnes rigides via grid-template-columns, et les éléments s'empilent librement du haut vers le bas dans l'axe vertical (le stacking axis est l'axe des blocs).

.container {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr); /* Mode vertical (waterfall) */
}

Distribution horizontale (brick)

À l'inverse, si vous définissez des lignes fixes à l'aide de la propriété grid-template-rows, Grid Lanes bascule la distribution et les éléments se déploient horizontalement, de gauche à droite, en allant se loger dans la ligne la moins large, créant un alignement rappelant un mur de briques.

.container {
  display: grid-lanes;
  grid-template-rows: repeat(3, 1fr); /* Mode horizontal (brick) */
}

Le seuil de tolérance : flow-tolerance

L'algorithme de Grid Lanes cherche en permanence à combler le vide le plus haut possible. Cependant, une différence infime d'un seul pixel entre deux colonnes peut contraindre l'algorithme à propulser un élément dans une colonne inattendue, bouleversant l'ordre visuel global pour un détail technique invisible.

C'est là qu'intervient la propriété flow-tolerance. Elle permet d'indiquer au navigateur un seuil de tolérance (une marge d'erreur admissible). Si deux colonnes ont des hauteurs proches comprises dans cette fourchette, le navigateur considère qu'il y a "égalité" et choisit de respecter l'ordre naturel d'écriture du document plutôt que d'optimiser l'espace au pixel près.

.masonry-container {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
  /* Si l'écart entre les couloirs est inférieur à 20px, on privilégie l'ordre logique source du HTML */
  flow-tolerance: 20px; 
}

Accessibilité et sens de lecture : reading-flow

C'était le talon d'Achille historique de Flexbox, Grid Layout et Masonry de manière générale : la déconnexion entre l'ordre visuel affiché à l'écran et l'ordre réel du code source HTML. Lorsqu'un utilisateur navigue au clavier (touche Tab) ou utilise un lecteur d'écran, le focus saute de manière chaotique d'une colonne à une autre en fonction de la façon dont l'algorithme a imbriqué les boîtes.

L'ordre visuel et l'ordre de lecture logique doivent concorder. Avec Grid Lanes, l'usage de reading-flow devient indispensable pour les conteneurs réordonnés.

.masonry-container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  /* Aligne l'ordre de navigation clavier et des revues d'écran 
    sur la disposition visuelle générée par la grille */
  reading-flow: grid-rows;
}

Grâce à reading-flow: grid-rows, la navigation séquentielle va suivre le rendu géométrique (de gauche à droite, ligne par ligne) offrant une expérience fluide et naturelle, balayant les anciens griefs liés aux interfaces asynchrones.

Conclusion

L'arrivée de display: grid-lanes marque une étape clé dans la maturité des modules de mise en page CSS. En combinant la rigueur d'un axe dimensionnel hérité de CSS Grid avec la flexibilité d'un empilement organique, cette évolution comble un manque historique sans sacrifier les impératifs d'accessibilité grâce au renfort de reading-flow et flow-tolerance.

À ce jour, cette fonctionnalité demeure expérientale. Elle est à tester sous couvert de flags navigateurs ou via l'amélioration progressive. Le CSS moderne continue de remplacer avantageusement les scripts lourds d'autrefois pour notre plus grand confort… et celui de nos utilisateurs !