À quand un module CSS pour un effet Masonry no JS ?

J'attendais comme l'Arlésienne le module CSS Grid Layout en pensant pouvoir créer facilement un effet Masonry full CSS, sans JavaScript.

M'étant désormais documenté sur ce module (oui j'ai attendu, parce que bon : les changements de spec' toutes les 5mn...) et ayant effectué mes premiers essais je me rends compte que ce module ne pourra jamais créer un vrais effet Masonry, au mieux un truc de ce genre :
Test Masonry with CSS Grid Layout
En effet, le principe de cette grille est d'être... une grille, alors que Masonry déroge à un alignement vertical, ne se référant qu'au contenu pour régler la hauteur de ses items.

Pour rappel, lors d'essais précédents discutés ici-même sur le forum avec Zéléna, on était au mieux arrivé à un bidouillage basé sur la règle `column` :
Responsive Masonry in CSS column
Le problème étant que les items se placent en... colonnes, c'est à dire verticalement, l'objectif étant qu'ils se distribuent horizontalement.

À quand un module CSS pour un effet Masonry no JS digne de ce nom ? Mais peut-être ai-je loupé une astuce ?
Modifié par Olivier C (24 Sep 2017 - 19:11)

Bonjour.

C'est curieux, je ne me souviens pas de cette discussion…

Depuis que j'ai viré Windows et mis un vieux Fédora, je n'ai plus accès à GridLayout.

Effectivement, l'idée de GridLayout est de reproduire sur écran ce qui existe depuis longtemps sur papier (rythme horizontal et vertical, mise en page modulaire…) et sur lequel on a déjà pas mal de recul.

Ce qui se rapproche le plus de 'votre' Masonry semble être cette propriété :
https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow

Mais c'est devenu difficile pour moi de tester…

À mon avis, jamais.

Masonry dépend de tellement de réglages et complexités pour être utilisé proprement qu'il est très délicat de faire cela en CSS

De plus, le cas évoqué ici n'est qu'un cas particulier de Masonry simplifié: des colonnes fixes avec des items de même largeur. Même dans ce cas simplifié les problèmes sont multiples:

1) Les algorithmes de répartition sont multiples: répartition optimale dans la hauteur, addition de chaque item dans la colonne la plus petite, répartition tout en tentant de garder un ordre gauche-droite plus intuitif, etc. Chacun peut avoir ses raisons d'être selon la situation, et permettre un «choix de l'algorithme» par une propriété multiplierait les problématiques suivantes.

2) Le chargement. Selon l'algorithme il faut avoir tout ou en partie du contenu chargé et pre-dessiné avant de le répartir. Cela va donc à l'encontre des algos de flex, grid-layout et columns.

3) Le reflow. À quelles condition réapplique-t-on l'algo? Changement de taille du conteneur (par window resize par exemple), changement de taille d'un item? Quid du zoom Text par exemple? Et est-il logique qu'un ajoutant un élément dans un block celui-ci passe de la colonne 4 à la colonne 2 alors qu'un élément de la colonne 1 passe à la 4?

4) la gestion des tailles relatives, qui peuvent très vite devenir un casse-tête sans fin. Boucles infinies et autres joyeusetés.

Lorsqu'on code cela en javascript, on limite généralement la situation à des cas simplistes, connus à l'avance, qui permettent de mettre de côté la plupart des écueils relevés. Mais une spec CSS pour gérer cela doit donner des réponses à tous ces cas conflictuels et le travail est titanesque, alors que les bénéfices sont moindres car cela ne reste qu'un gimmick de présentation appliqués à quelques cas particuliers.

@kustolovic : merci d'avoir fait part de ta réflexion, très interessante.

Olivier C a écrit :

Et je suis bien incapable de la retrouver. Il s'agissait peut-être d'une simple remarque. C'était il y a quelque temps déjà, à partir d'une question posée par un alsanaute de passage il me semble...

Il me semble que le sujet en question est celui-ci: https://forum.alsacreations.com/topic-4-80418-1-EffetmasonryenCSSflexboxsansJS.html

Cdt,

Hello,

Je déterre ce sujet car je suis tombé sur un article intéressant de Smashing Magazine : https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/#can-i-do-a-masonry-layout-with-grid

Il y est dit : "You can get the look of Masonry with a grid layout by positioning all of your items but the ability to do an auto-placed Masonry layout isn’t there yet. It is something we are thinking about however for future levels of the specification."