Répartir sur deux colonnes les éléments d'un parent unique

Bonjour,

Je suppose qu'il n'existe pas de solution à mon problème sans réorganisation du code html.

J'ai un parent avec un nombre inconnu d'enfants de tailles inconnues.

Je veux organiser la page en deux colonnes.

Dans ce codepen j'essaye avec display GRID.

Le problème est bien sûr que la hauteur de chaque ligne est celle de son élément le plus haut.

Mon souhait serait de fusionner en hauteur toutes les cellules de chaque colonne mais je ne vois pas comment faire, sauf bien sûr à créer un parent pour les éléments de gauche, un parent pour ceux de droite et un parent pour ces deux parents.

Merci d'avance pour votre aide.
Modifié par boteha_2 (13 Mar 2023 - 20:12)

Bonsoir,

il y aurait https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout / https://drafts.csswg.org/css-grid-3/#masonry-layout

J'avais fait une expérience il y a un moment , l'idée était de mettre les lignes (rows) à une hauteur de 1px , puis de récupérer la hauteur de chaque élément pour qu'ils s’étalent sur autant de ligne - codepen de test : https://codepen.io/gc-nomade/pen/GRqwwdg , ce qui donnerait pour le tien : https://codepen.io/gc-nomade/pen/PodQKLb J'y ai ajouter un mediaquerie pour passer en une colonne (ligne 8 sur le js) https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries .

Le mieux, il me semble, serait de te servir du script masonry fiable depuis plus d'une décennie https://masonry.desandro.com/

Sinon , il y a column-width: XXpx ; mais qui génère des colonnes de même largeurs d'au moins la valeur indiquée, qui les remplie les unes après les autres et en génère autant que la place disponible le permet . Voici un exemple plus ou moins responsive https://codepen.io/gc-nomade/pen/YzprPQy Ce sont des images, mais des blocks de textes auront basiquement le même comportement .

Cdt
Modifié par gcyrillus (12 Mar 2023 - 22:41)

Ce truc là ça fait des années qu'on en parle sur le forum.

Du coup je m'étais inspiré des différents commentaires - et notamment des tiens gcyrillus - pour faire un effet masonry avec du grid layout et un script très léger. Au final ça donne ceci : image gallery (démo).
C'est sur quatre colonnes au plus large, mais rien n'empêche de mettre à deux colonnes. On en reparle si quelqu'un est intéressé.
Modifié par Olivier C (19 Mar 2023 - 00:02)

Bonjour,

Tout cela est très intéressant, j'ai besoin d'y réfléchir.

Juste une remarque pour Olivier C : tu parles de quatre colonnes mais sur ton lien je vois qu'une seule colonne.

boteha_2 a écrit :
Juste une remarque pour Olivier C : tu parles de quatre colonnes mais sur ton lien je vois qu'une seule colonne.

Il est possible que ton navigateur ne soit pas à jour et que par conséquent il ne supporte pas les Container Queries. Dans ce cas une feuille de styles supplémentaire se charge pour compenser (avec des media queries classiques), mais cela prend plus de temps.

Je pourrais faire différemment en les proposant d’emblée, mais je préfère favoriser les navigateurs mis à jour au détriment des anciennes versions. Une fois le style supplémentaire chargé il est mis en cache et les opérations suivantes sont plus transparentes (il y a tout de même un temps de recalcul de la page qui se voit).
Modifié par Olivier C (13 Mar 2023 - 22:30)

Bonjour Olivier C,

Chez moi sous windows 10, cela marche avec Chrome.

Mais pas avec Firefox 110.0.1 qui pourtant me semble être la dernière version.
Je ne vois qu'une seule colonne quelle que soit la taille de la fenêtre.

Je continue à réfléchir à vos solutions...

Ah oui, effectivement, j'avais mis une condition au cas où les navigateurs ne supportent pas les Container Queries, accompagné d'un fallback ajoutant une feuille de styles. À ce que je vois Firefox supporte désormais les Container Queries... mais toujours pas les requêtes média de niveau 4, il faut que je trouve un moyen pour les tester elles aussi pour déclencher le fallback.

Édit : en fait, Firefox supporte très bien les requêtes niveau 4, mais toujours pas les @contaiiner, c'était mon test en javascript de ces derniers qui n'etait pas bon car il ne marchait qu'avec Chrome, il faut que je trouve un moyen de tester aussi avec Firefox, j'ai fait un petit hack pour Firefox en attendant.

Quoi qu'il en soit tu n'as pas besoin de tout cela, des medias queries classiques suffisent pour tes besoins.
Modifié par Olivier C (16 Mar 2023 - 05:59)

Je viens de faire un petit correctif pour que Firefox accepte le patch. J'ai fais ça à l’arrache car je n'arrive pas à détecter en javascript ce qui manque en CSS dans Firefox (window.matchMedia ne fait pas le taf).

Merci pour le retour en tout cas.
Modifié par Olivier C (15 Mar 2023 - 01:47)

Bonjour,

boteha_2 a écrit :
Une lecture rapide me laisse à penser que c'est très prometteur mais encore trop peu supporté pour production.

C'est sur le point d'être utilisable en production, voire déjà utilisable en production (mais c'est très récent).

Amicalement,

Bonjour Olivier C,

Ton patch pour Firefox fonctionne chez moi : Firefox 110.0.1

Je continue à réfléchir.

Bonjour,

Je ne suis pas sûr d'avoir compris ton besoin, mais pourquoi ne pas utiliser ici la propriété css columns ?

Si on garde le html de https://codepen.io/boteha_2/pen/GRXQEba et qu'on remplace la totalité du css par le css suivant, est-ce que ça suffirait ?

body {columns: 15em auto;}
table {border: 1px solid gray}

Ou bien, pour 2 colonnes exactement :

body {columns: 2;}
table {border: 1px solid gray}

Amicalement,
Modifié par parsimonhi (15 Mar 2023 - 11:55)

Oui c'est vrai, columns ça marche aussi. Exemple : Columns.

Bonjour parsimonhi,

Merci de ton suivi.

Mon problème est d'affecter un élément à gauche ou à droite sans connaitre sa hauteur.
Et en fusionnant les espaces vides dans chaque colonne.

Est-ce que c'est plus clair pour toi ?

Dans le codepen j'ai créée une class="droite" pour les éléments à passer à droite.

Comme déjà dit c'est enfantin en changeant le code html, mais une solution par les css serait plus sympa pour mon besoin.

Bonjour,

As-tu essayé ce que j'ai proposé sans changer ton html ?

Amicalement,

Pour l'idée de columns je regarde ce soir.

Je vous tiens informés.

Bonjour,

Sur la codepen j'ai installé la solution de parsimonhi : propriété css columns.

Deux colonnes fluides, très intéressant.
Mais cela ne fait que la moitié du boulot car l'autre moitié est d'affecter certains éléments dans la colonne de gauche et d'autres dans la colonne de droite.

Je n'ai pas eu le temps de creuser mais gcyrillus a proposé plusieurs solutions qui ont le petit défaut d'être assez lourdes en javascript, tout cela étant très intéressant.