CSS Grid Lanes : La nouvelle mise en page Masonry native

Vous avez déjà créé des mises en page de style Pinterest. Vous avez utilisé des bibliothèques JavaScript, des astuces CSS multi-colonnes, ou des contournements complexes avec Grid et des calculs de portée de lignes. Chaque approche fonctionne, mais aucune ne semble native.

CSS Grid Level 3 explore un comportement natif de type masonry au sein de Grid. Une proposition actuelle introduit display: grid-lanes comme syntaxe possible pour cette fonctionnalité—mais avant de refactoriser votre code de production, vous devez comprendre où en sont réellement les choses début 2026.

Cet article couvre le concept fondamental derrière CSS Grid Lanes, en quoi il diffère du Grid traditionnel, les réalités actuelles du support navigateur, et ce que vous devriez considérer avant de l’adopter.

Ce que fait réellement CSS Grid Lanes

Le CSS Grid traditionnel fonctionne sur deux axes simultanément. Vous définissez à la fois les lignes et les colonnes, et les éléments occupent des cellules explicites. Cela crée des mises en page rectangulaires prévisibles—mais laisse également des espaces vides lorsque les éléments ont des hauteurs variables.

Le brouillon CSS Grid Level 3 introduit un comportement de type masonry, parfois appelé « grid lanes », où vous définissez des pistes sur un axe (généralement les colonnes) et les éléments se compactent étroitement sur l’autre axe en utilisant un algorithme de type masonry. Les éléments s’écoulent dans la voie qui a le plus d’espace disponible, remplissant automatiquement les espaces vides.

La syntaxe actuelle en discussion dans le brouillon ressemble à ceci :

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Cependant, la syntaxe et le comportement évoluent encore. Des expérimentations antérieures utilisaient des valeurs comme masonry au sein de grid-template-rows ou grid-template-columns, et certains moteurs ont implémenté des versions prototypes de ces approches. Le CSS Working Group continue d’affiner l’intégration du masonry dans Grid Level 3. Consultez le dernier brouillon du CSS Grid Layout Module Level 3.

En quoi Grid Lanes diffère du Grid standard

Avec display: grid, les éléments respectent à la fois les pistes de lignes et de colonnes. Les éléments plus courts laissent un espace vide en dessous jusqu’à ce que la ligne suivante commence.

Avec le comportement Grid de style masonry, un seul axe a des pistes définies. Les éléments sur l’autre axe s’empilent en fonction de l’espace disponible, et non de limites de lignes strictes. Cela crée l’apparence décalée caractéristique des mises en page masonry.

La plupart des fonctionnalités Grid familières—telles que la définition de pistes de colonnes et le placement explicite—restent conceptuellement disponibles, mais les implémentations peuvent varier tant que la fonctionnalité est expérimentale. Les comportements tels que la portée et le placement dans les cas limites ne sont pas encore entièrement interopérables entre les moteurs.

Mises en page Waterfall vs. Brick

Définissez des colonnes avec grid-template-columns, et les éléments s’écoulent verticalement—la mise en page waterfall classique. Définissez des lignes avec grid-template-rows (dans les implémentations expérimentales), et les éléments s’écoulent horizontalement dans un motif de type brique.

Les détails tels que le comportement de flux et les contrôles d’ordre sont encore en discussion dans la spécification et peuvent différer entre les aperçus navigateurs. Évitez de vous appuyer sur des propriétés non standard ou uniquement en brouillon à moins de vérifier le support dans votre navigateur cible.

Support navigateur : Le tableau réaliste

C’est ici que la planification de production devient compliquée.

Début 2026, le comportement masonry natif dans CSS Grid reste expérimental sur tous les navigateurs majeurs :

• Safari Technology Preview dispose de l’une des implémentations prototypes les plus complètes.
• Les navigateurs basés sur Chromium ont expérimenté avec une syntaxe liée au masonry derrière des flags, incluant les valeurs de piste masonry antérieures.
• Firefox a implémenté des expérimentations masonry derrière des flags de configuration.

Aucun canal stable de navigateur majeur n’offre un support entièrement interopérable et sans flag au moment de la rédaction. Vous pouvez suivre l’état de compatibilité via Can I use et les notes de version des navigateurs.

Le CSS Working Group continue d’affiner les détails d’intégration au sein de Grid Level 3.

Le point pratique à retenir : Ne déployez pas de syntaxe Grid de style masonry en production sans solutions de repli.

Stratégie d’amélioration progressive

La détection de fonctionnalités vous permet d’expérimenter là où c’est supporté tout en revenant gracieusement en arrière :

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

@supports (display: grid-lanes) {
  .container {
    display: grid-lanes;
  }
}

Les navigateurs sans support affichent une mise en page Grid standard. Les éléments s’alignent sur des lignes au lieu de se compacter étroitement—une base acceptable pour de nombreux cas d’usage.

Parce que la syntaxe peut changer avant la stabilisation, traitez cela comme une amélioration progressive plutôt qu’une dépendance de production à long terme.

Préoccupations d’accessibilité et d’ordre des sources

Les mises en page masonry introduisent un problème d’ordre DOM versus ordre visuel. Les éléments apparaissent dans des positions déterminées par l’algorithme de compactage, et non par leur ordre dans le code source. Un utilisateur naviguant au clavier dans le contenu peut sauter de manière imprévisible à travers la mise en page.

Ce n’est pas propre à Grid Lanes—c’est inhérent aux mises en page de style masonry. Vous devriez tester minutieusement la navigation au clavier, en particulier pour le contenu où la séquence de lecture importe.

Les lecteurs d’écran suivent l’ordre du DOM indépendamment du placement visuel. Assurez-vous que votre structure HTML a du sens lorsqu’elle est lue linéairement.

Conclusion

Pour les expérimentations, prototypes et couches d’amélioration progressive, le comportement Grid de style masonry vaut la peine d’être exploré maintenant. La direction devient plus claire au sein de Grid Level 3, et l’expérience pratique aujourd’hui sera payante lorsque le support navigateur arrivera à maturité.

Pour les fonctionnalités de production nécessitant un comportement cross-browser cohérent, attendez. Surveillez les discussions sur les spécifications et les notes d’implémentation des navigateurs avant de vous engager.

Le masonry CSS natif est une demande de longue date. Il prend enfin forme—mais il n’est pas encore entièrement standardisé ou interopérable. Vérifiez que le support navigateur correspond à vos exigences avant de l’adopter largement.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..