Masonry dynamique, 2 colonne et flexbox

Bonjour,
j'aimerais savoir comment calculer automatiquement la hauteur d'un élément qui en contient plusieurs (en javascript peut-être) ?

Ma liste contient deux colonnes (flexbox) avec un affichage horizontal/vertical du style "masonry" comme ceci:
[ 1 ][ 2 ]
[ 3 ][ 4 ]
[ 5 ][ 6 ]

Chaque item contient une image et un bouton "afficher" + un texte caché.
Quand je clique sur le bouton "afficher" d'un item, le texte de l'item en question s'affiche.
Jusque la tout fonctionne mais quand la hauteur des items dépasse celle de la "liste" de départ, les items s'affiche les un à coté des autres:
[ 1 ][ 5 ][ 2 ]
[ 3 ][ ][ 4 ]
[ 6 ]

Voila un "codepen" pour être plus explicite: https://codepen.io/starckio/pen/xxxRmOP

Sachant que je ne connais pas le javascript, et-il possible de résoudre se problème avec celui-ci ?

Merci beaucoup.

column CSS est probablement mieux adapté a ce genre de layout :

demo de ton code : https://jsfiddle.net/Lr37w1st/

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes

gcyrillus a écrit :
column CSS est probablement mieux adapté a ce genre de layout :

demo de ton code : https://jsfiddle.net/Lr37w1st/

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes

Oui et non car avec le code que tu partage, l'affichage reste en colonne.

Ce que ton code affiche:
[ 1 ][ 4 ]
[ 2 ][ 5 ]
[ 3 ][ 6 ]

Ce que j'aimerais:
[ 1 ][ 2 ]
[ 3 ][ 4 ]
[ 5 ][ 6 ]

il ne te reste que le script masonry,

* column ne te convient pas dans son sens d'affichage

* flex nécessite une hauteur pour ajouter une colonne

* grid nécessite que le placement au travers de plusieurs cellule soit explicitement indiqué dans le CSS pour caque élément et comme ça changera a chaque clique ...

Sinon voici un sujet récent similaire avec des pistes supplementaires: https://forum.alsacreations.com/topic-4-85619-1-Affichage-Masonry-CSS-pour-commentaires.html

gcyrillus a écrit :
il ne te reste que le script masonry

Bonjour, désolé pour le retard.

J'ai trouvé une autre solution qui inclus un petit script JS.
Ça fonctionne très bien pour ce que je veux faire mais pas quand je redimensionne ma fenêtre.

Voila le code: https://codepen.io/starckio/pen/RwwQWRj

Sur mobile, l'affichage contient qu'une seul colonne et les items ne sont pas a suivre:
[ 1 ]
[ 3 ]
[ 5 ]
[ 2 ]
[ 4 ]
[ 6 ]

Peut-on désactiver le script à un certain seuil de redimensionnement ?

Merci beaucoup.

Bonjour starckio,
Un exemple rapide à tester, voir améliorer pour faire un reset de tes .masonry
https://codepen.io/Zonecss/pen/ZEErrgZ

aliasdmc a écrit :
Bonjour starckio,
Un exemple rapide à tester, voir améliorer pour faire un reset de tes .masonry
https://codepen.io/Zonecss/pen/ZEErrgZ

Merci beaucoup et non merci. Étant donné que je ne maitrise pas du tout le Js et que je n'ai pas le temps d'apprendre ce langage, je vais me contenter d'afficher autrement mes items. À chacun son métier je dirais.
J'avais tout de même pris le temps de créer une démo conforme à ce que je recherchais pour ne pas passer pour la personne qui demande sans essayer… mais bon.
Désolé que tu te sois donné autant de mal pour trouver une solution.

Merci bien.