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

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…

Zelena a écrit :
C'est curieux, je ne me souviens pas de cette discussion.

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...
Modifié par Olivier C (26 Sep 2017 - 08:06)

À 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.

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."