Design

CSS Grid Lanes : WebKit publie le Field Guide officiel

Le 10 juin 2026, Jen Simmons (WebKit) a publié le Field Guide to CSS Grid Lanes, une ressource de référence complète accompagnée d'un site dédié à gridlanes.webkit.org. Cette publication s'inscrit dans le contexte de WWDC 2026, où Apple consolide le support de Grid Lanes dans Safari 27.

CSS Grid Lanes : le masonry natif enfin en CSS

Pendant des années, les développeurs ont contourné l'absence de layout masonry natif en CSS par des bibliothèques JavaScript (Masonry.js, Isotope) ou en empilant des colonnes flexbox. CSS Grid Lanes (display: grid-lanes) résout ce problème à la source : un mode de layout CSS nativement intégré dans le navigateur.

Le principe : on définit des colonnes (ou des rangées), et les éléments se placent automatiquement dans la case disponible la plus haute, formant un empilement compact sans espaces inutiles — le fameux effet Pinterest.

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Disponibilité actuelle : CSS Grid Lanes est disponible stable dans Safari 26.4 (mars 2026) et dans Safari 27 beta. Chrome et Firefox ont l'implémentation derrière un flag expérimental, avec un déploiement stable attendu dans les prochains mois.

Le Field Guide : un outil pédagogique interactif

Le site gridlanes.webkit.org propose :

Un playground interactif en haut de page : le layout Grid Lanes s'édite en temps réel via un éditeur CSS intégré. On peut copier le code généré directement.
Deux modes : Waterfall (colonnes classiques avec auto-placement) et Brick (alignement sur une grille fixe)
Des presets de mise en page courants avec ajustement du « Flow tolerance »
Une référence de syntaxe complète avec tous les mots-clés et propriétés spécifiques à Grid Lanes
Des démos réelles applicables directement en production

Syntaxe et propriétés clés

CSS Grid Lanes s'appuie sur les fondamentaux de CSS Grid, avec un ensemble de propriétés nouvelles :

Propriété	Rôle
`display: grid-lanes`	Active le mode Grid Lanes
`display: inline-grid-lanes`	Version inline
`grid-template-columns`	Définit les colonnes (axe structuré)
`grid-template-rows`	Ou définit les rangées pour un layout horizontal
`flow-tolerance`	Contrôle la tolérance au placement non-séquentiel

Le flow-tolerance est particulièrement intéressant : à 0, l'ordre source HTML est strict (comme Flexbox). En l'augmentant, on autorise le navigateur à réarranger les items pour minimiser les espaces vides, au prix de l'ordre visuel.

Pourquoi Grid Lanes plutôt que les alternatives ?

Pas de JS : aucun script de calcul de hauteur, aucune dépendance externe, aucun flash de contenu pendant le calcul
Accessible par défaut : le DOM reste inchangé, la navigation clavier et les lecteurs d'écran fonctionnent normalement
Progressive enhancement facile avec @supports pour les navigateurs ne supportant pas encore Grid Lanes

.gallery {
  /* Fallback : grille standard */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

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

Ce que ça change pour le design engineering

Le Field Guide de WebKit est typiquement le type de ressource qui accélère l'adoption d'une fonctionnalité. La combinaison d'un playground éditorial et d'une documentation de référence en un seul endroit réduit la friction pour les développeurs qui veulent expérimenter avant que la fonctionnalité soit cross-browser.

Avec Safari 27 qui arrive à l'automne et Chrome/Firefox en route, 2026 devrait marquer la fin pratique des bibliothèques JavaScript de masonry pour les nouveaux projets.

Sources