CSS Grid Lanes

(webkit.org)

6 points par GN⁺ 2025-12-20 | Aucun commentaire pour le moment. | Partager sur WhatsApp

Une nouvelle fonctionnalité CSS, Grid Lanes, a été introduite dans Safari Technology Preview 234 pour implémenter des layouts masonry sur le Web
La propriété display: grid-lanes permet de créer une grille responsive sans media queries, avec une définition flexible des colonnes via grid-template-columns
La propriété item-tolerance permet d’ajuster la sensibilité du placement des éléments, afin d’atténuer les déséquilibres visuels dus aux différences de taille des contenus
Prise en charge à la fois en direction des colonnes et des lignes, avec un flux déterminé automatiquement selon la définition de grid-template-columns ou grid-template-rows
Le CSS Working Group discute encore de certains noms de propriétés de détail, tandis que l’équipe WebKit mène la standardisation et l’implémentation en parallèle pour encourager les expérimentations des développeurs

Présentation de CSS Grid Lanes

Grid Lanes est un nouveau mode d’affichage destiné à implémenter en CSS natif des layouts de type masonry sur le Web
- Il se configure avec display: grid-lanes, en utilisant une syntaxe proche de grid
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) permet de créer des colonnes flexibles d’une largeur minimale de 250px
La propriété gap définit l’espacement entre les éléments, avec une adaptation à toutes les tailles d’écran sans media queries
Expérimentation possible dans Safari Technology Preview 234, avec une page de démos proposée par WebKit

Le navigateur place automatiquement chaque élément dans la colonne la plus proche du haut
- Comme avec Masonry.js, l’élément suivant est ajouté à la colonne actuellement la plus courte
- Lors de la navigation au clavier avec Tab, l’utilisateur peut parcourir horizontalement le contenu actuellement visible
En cas de chargement de contenu en défilement infini, l’alignement automatique peut se faire sans JavaScript

Variation de la taille des lanes : la syntaxe grid-template-* permet d’alterner colonnes étroites et colonnes larges
- Exemple : grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)
Prise en charge de l’extension d’éléments (span)
- Il est possible d’étendre certains éléments sur plusieurs colonnes (grid-column: span 4, etc.)
- Démo d’exemple : un layout de type article de journal
Placement explicite possible
- Exemple : header { grid-column: -3 / -1; } pour fixer le header dans les dernières colonnes

Prise en charge des layouts basés sur les colonnes (waterfall) comme sur les lignes (brick)
- Si grid-template-columns est défini, l’orientation en colonnes est choisie automatiquement ; si grid-template-rows est défini, l’orientation en lignes l’est aussi automatiquement
grid-auto-flow: normal est la valeur par défaut, avec une décision automatique selon l’orientation définie
Le CSS Working Group discute actuellement de la dénomination de propriétés de contrôle du flux (grid-lanes-direction, etc.)
- Les échanges ont lieu dans une issue GitHub de CSSWG-drafts

item-tolerance détermine à quel point les différences de taille entre éléments sont distinguées strictement lors du placement
- La valeur par défaut est 1em ; toute différence inférieure est considérée comme une même hauteur
- Plus la valeur est élevée, moins les éléments se déplacent latéralement ; plus elle est faible, plus on obtient un ajustement fin de la position
Du point de vue de l’accessibilité, il faut définir une valeur adaptée pour minimiser les sauts visuels lors de la navigation avec Tab
Le nom de la propriété est actuellement item-tolerance, mais il pourrait être remplacé par flow-tolerance ou pack-tolerance

Plusieurs démos sont proposées dans Safari Technology Preview 234
- Galerie photo, article au format journal, site de musée, layout de méga-menu, etc.

Exemple de code :

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}

Utile non seulement pour les images, mais aussi pour les footers ou menus riches en liens

Le CSS Working Group poursuit la détermination des noms de propriétés restants
L’équipe WebKit travaille en parallèle sur l’implémentation et la standardisation depuis la mi-2022
Les développeurs sont encouragés à créer des démos et à participer aux retours
- Jen Simmons recueille les avis via Bluesky et Mastodon
La syntaxe de base est désormais stabilisée, et prête à être utilisée dans de vrais projets