CSS Grid Lanes

 (webkit.org)
6 points par GN⁺ 2025-12-20 | 2 commentaires | 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

Fonctionnement de Grid Lanes

  • 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

Extensions de CSS Grid

  • 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

Changement d’orientation

  • 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

Ajuster la sensibilité du placement : item-tolerance

  • 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

Exemples d’expérimentation et d’usage

  • 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

Prochaines étapes

  • 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

À lire aussi

2 commentaires

 
shakespeares 2025-12-21

Donc il faut utiliser séparément Grid-lanes pour Safari et grid pour Firefox. Harmonisez un peu ça avec les standards du Web, s'il vous plaît...
 
GN⁺ 2025-12-20
Avis sur Hacker News

  • Bravo à l’équipe Safari. Leur remontée soudaine tout en haut du classement Interop 2025 en octobre est vraiment impressionnante

    • Depuis iOS 26, on sent que Safari a reçu une énorme mise à jour des fonctionnalités web. Pas seulement WebGPU, mais aussi les éléments manquants de l’API OPFS, qui la rendent désormais utilisable en pratique. En plus, la propriété CSS field-sizing a été ajoutée, ce qui règle le problème des champs de saisie texte qui s’agrandissent automatiquement selon leur contenu
    • Safari est souvent considéré comme « le meilleur navigateur » à chaque grosse version, mais il a tendance à être beaucoup critiqué le reste du temps. À mon avis, c’est parce que les autres navigateurs font des mises à jour continues, alors que Safari suit un cycle de publication plus traditionnel
    • En réalité, ce n’est pas si surprenant. Cela fait déjà plusieurs années que l’équipe Safari déploie régulièrement les dernières fonctionnalités HTML et CSS
    • Pendant que l’équipe Chrome met en avant des fonctions expérimentales comme WebPCIe, Safari fournit des fonctionnalités que les utilisateurs veulent vraiment. Par exemple, il prenait déjà en charge bien plus tôt des effets comme les arrière-plans flous
    • Cela dit, c’est dommage que Safari ne prenne toujours pas en charge le wasm 64 bits. La liste des fonctionnalités WebAssembly indique « prise en charge à 100 % », mais en réalité il manque encore des éléments importants

  • J’espère que la fonctionnalité CSS Gap Decorations arrivera vite. J’en ai assez de devoir continuer à utiliser des bidouillages inutiles pour créer de jolies séparations entre les éléments d’un flex ou d’une grille

    • Quelqu’un propose d’utiliser des tableaux. C’est déjà bien meilleur qu’avant, mais on veut toujours davantage. L’être humain semble incapable d’être satisfait

  • J’ai utilisé une mise en page Masonry sur un projet récent : les performances sont correctes, mais comme c’est basé sur l’absolute positioning, c’est assez bancal. Il faut connaître à l’avance le ratio d’aspect des objets et tout recalculer lors d’un redimensionnement. J’attends donc avec impatience une prise en charge native

    • Je ressens la même chose. J’attends que le CSS règle ce problème, et le jour où je pourrai enfin retirer les 1,3 Ko restants de JavaScript de ma page d’accueil depuis 2019. Merci à tous ceux qui travaillent sur cette fonctionnalité

  • Ces annonces sont intéressantes, mais il y a un côté comédie tragique. Comme Apple ne met pas à jour son navigateur en continu, il faut attendre longtemps avant de pouvoir réellement faire confiance à ces nouvelles fonctionnalités et les utiliser

  • Les mises en page Masonry sont jolies, mais je trouve qu’elles rendent plus difficile la perception d’ensemble des images

    • Une grande partie du « design » web met l’accent sur l’apparence plutôt que l’utilisabilité. Presque personne n’utilise réellement le produit ; on regarde juste les animations de défilement en disant « c’est cool »
    • Quand les images sont toutes au format paysage ou portrait, ça va, mais quand c’est mélangé, la mise en page devient chaotique

  • Je me demande pourquoi ils ne l’ont pas appelé Masonry. Cela dit, le nom grid-lanes est descriptif, donc facile à comprendre

  • Je me demande combien de temps il faudra aux LLM pour assimiler correctement cette nouvelle syntaxe CSS

  • Si je devais regarder une page web composée d’une grille de textes avec des tailles et positions arbitraires, je préférerais presque qu’on m’abatte
    Image de démonstration d’une grille façon journal

    • Tu n’as jamais lu un journal ?
    • Moi, j’aime bien ce type de design. On peut créer sur le web une mise en page asymétrique mais efficace comme dans les journaux
    • Mais j’ai l’impression que cela viole des principes de base du design, comme l’alignement et le regroupement
    • Ce qui est drôle, c’est que moi je trouve ça vraiment génial
    • NYTimes.com me vient immédiatement à l’esprit comme exemple

  • Personnellement, je n’aime pas les mises en page en lanes. Il est difficile de parcourir tous les éléments d’une liste dans l’ordre, et le regard saute de haut en bas, ce qui provoque une forte fatigue cognitive

    • Mais si l’on n’a pas besoin d’examiner systématiquement chaque élément, ce type de mise en page peut convenir. C’est adapté à des sites comme Pinterest, où l’on absorbe le contenu d’un seul coup d’œil
    • C’est joli à voir, mais inconfortable à utiliser en profondeur
    • Le but n’est pas l’efficacité, mais de permettre de voir l’ensemble d’un coup d’œil. Comme un journal ou une galerie photo
    • C’est ironique que la fonctionnalité arrive au moment où la mode est déjà en train de passer. En UX ce n’est pas terrible, mais visuellement c’est joli
    • Ça donne une impression de design cerveau droit. Ça convient à des sites comme Pinterest ou Home Assistant

  • Je pense qu’Apple devrait permettre de télécharger Safari de manière fiable sur toutes les plateformes

    • Je me souviens avoir installé Safari sur Windows XP autrefois. Apparemment, pas assez de temps ne s’est encore écoulé depuis cet échec
    • Mais ce sera peut-être possible indirectement. Le nouveau navigateur de Kagi utilise WebKit, et même s’il est pour l’instant réservé à macOS, une version Windows est prévue à terme