CSS Grid Level 3, alias les mises en page « Masonry », demande votre aide pour les inventer

• Une proposition est en cours pour ajouter la mise en page Masonry de CSS Grid (également appelée disposition en briques ou en cascade) à CSS Grid Level 3

  • La mise en page Masonry est un modèle qui remplit densément le contenu comme un mur de briques ou de pierres, en permettant de disposer des éléments de tailles différentes sans les rogner ni les omettre, tout en les faisant s’écouler par colonnes
  • C’est une mise en page qu’il était difficile d’implémenter uniquement en CSS, sans JavaScript

• Quatre démos ont été créées pour explorer l’implémentation d’un mécanisme Masonry en CSS

  • Créer une mise en page Masonry / en cascade classique
  • Exploiter les diverses fonctionnalités de définition de colonnes de Grid
  • Exploiter les fonctionnalités de fusion de colonnes de Grid
  • Utiliser subgrid et le placement explicite

• La combinaison des nombreuses fonctionnalités de Grid avec Masonry permet d’obtenir des mises en page bien plus créatives et dynamiques

  • Définition souple et variée de la taille des colonnes avec l’unité fr, max-content, min-content, la fonction minmax(), etc.
  • Fusion de colonnes pour mettre en valeur certains éléments ou composer des grilles plus variées
  • subgrid pour aligner les pistes d’une grille imbriquée sur celles du parent
  • Placement explicite pour définir la position de certains éléments comme les en-têtes

• Certains soutiennent que la mise en page Masonry devrait être séparée dans un type display distinct

  • Des inquiétudes existent sur le fait que combiner CSS Grid et Masonry augmente la complexité et puisse nuire aux performances
  • Séparer Masonry de Grid permettrait de faire évoluer indépendamment les fonctionnalités de chacun
  • Mais certains estiment aussi que Masonry ne devrait être implémenté que comme une disposition à colonnes de taille identique, plus limitée

• L’auteur considère qu’inclure la fonctionnalité Masonry dans CSS Grid présente davantage d’avantages

  • La spécification CSS Grid Level 3 est déjà rédigée et implémentée dans deux moteurs de navigateur
  • À l’avenir, les mêmes nouvelles fonctionnalités pourront être proposées à Grid et à Masonry (par exemple, le stylage des pistes)
  • Masonry est aussi une forme de Grid, ce qui en fait un bon ajustement sur le plan conceptuel

• L’auteur souhaite recueillir l’avis des web designers et développeurs

  • Masonry doit-il faire partie de CSS Grid ?
  • Souhaitez-vous pouvoir utiliser toutes les fonctionnalités de Grid, comme les tailles de colonnes variées, la fusion de colonnes, le placement et subgrid ? Ou vaut-il mieux ne prendre en charge que des colonnes de taille identique ?
  • Comment utiliseriez-vous cette fonctionnalité ? Quels types de mises en page pourriez-vous créer ?
  • Si vous avez créé vos propres démos, merci de les partager
  • Existe-t-il des mises en page difficiles à implémenter avec ce modèle ?

• Le nom Masonry n’est peut-être pas approprié. Une syntaxe comme grid-template-rows: off, au sens de « supprimer les lignes », pourrait être envisagée. Gardez à l’esprit que le nom pourrait changer à l’avenir

L’avis de GN⁺

• Ajouter la fonctionnalité Masonry à CSS Grid serait, selon nous, une évolution significative qui pourrait fortement accroître la capacité d’expression des mises en page web. En particulier, le fait de pouvoir implémenter facilement des grilles en colonnes orientées verticalement est très séduisant
• En revanche, il est difficile d’adhérer à l’idée de séparer Masonry dans un type display distinct et d’en limiter les fonctionnalités. Au contraire, il semble que la combinaison avec les puissantes capacités de Grid élargirait encore davantage les usages possibles des mises en page Masonry
• Cela dit, le nom Masonry n’est pas très intuitif et peut prêter à confusion. Il vaudrait donc la peine d’envisager une autre appellation pour désigner une grille dédiée aux colonnes. Une syntaxe comme grid-template-rows: none, qui exprime clairement l’idée d’une « grille sans lignes », semblerait préférable
• Cette proposition pourrait faire de CSS Grid un outil encore plus puissant. Il semble important d’expérimenter différents cas de mise en page et de faire activement remonter des avis

[GN⁺]

Avis Hacker News

Résumé :

• Le CSSWG et les équipes DevRel des éditeurs de navigateurs discutent depuis 2020 de la manière d’inclure officiellement la disposition Masonry dans CSS
  • L’équipe WebKit a décidé de rendre cette discussion publique afin de recueillir les avis des designers et des développeurs
  • Cela pourrait constituer un précédent important, et c’est aussi un débat de fond sur le fait de traiter toutes les options de mise en page comme faisant partie de CSS Grid ou de continuer à ajouter de nouvelles propriétés CSS display selon les besoins
• Comparer la disposition Masonry à un empilement de briques est amusant, mais construire de vraies briques ainsi serait une catastrophe en ingénierie des structures
• La démo de mégamenu est un exemple d’utilisation inappropriée de la disposition Masonry, car elle ruine le flux de lecture et trahit fortement les attentes
  • Les utilisateurs malvoyants liront toujours dans le « mauvais » ordre
  • Il aurait fallu l’implémenter en colonnes avec break-inside: avoid
• La démo de journal est elle aussi un peu suspecte pour des raisons similaires
• La disposition Masonry fonctionne mieux pour des images ou médias placés dans des blocs indépendants
• Comme ces démos reposent sur une mise en page Grid, elles s’affichent aussi dans les navigateurs non compatibles sous une forme raisonnable à lignes fixes
• J’aime bien l’impression générale des mises en page Masonry/Waterfall
  • Mais j’aimerais qu’il existe une disposition qui préserve davantage le flux de lecture gauche-droite que l’alignement Masonry par défaut
• Réflexion sur la manière de concevoir un système de mise en page pouvant remplacer CSS
  • Je me demande si des systèmes réellement implémentés comme Qt, Tk ou SwiftUI ont de meilleures idées
  • Comment pourrait-on offrir une meilleure interface aux développeurs ?
• Présentation d’un cas où l’effet Masonry a été réalisé sans JS sur un site photo personnel
  • Utilisation de display:inline-block pour traiter les photos comme du texte et les faire se redistribuer à la ligne suivante
  • Le résultat est jugé plus satisfaisant qu’avec la bibliothèque Masonry
• On se demande s’il est vraiment pertinent d’ajouter encore plus d’options de « mise en page » à CSS alors qu’il existe déjà Flexbox et Grid
  • Une meilleure solution pourrait être de créer un système final, fondé sur des contraintes, capable de couvrir tous les cas de mise en page, même s’il est complexe
• Cela fait plaisir de voir l’équipe WebKit refaire publiquement de l’excellent travail