[Résolu] Mettre des données en tableau de 2 colonnes avec grid

Bonjour, je souhaite afficher un tableau sur 2 colonnes avec des lignes qui s'ajoutent au fur et à mesure de l'ajout des données avec un grid-auto-flow:column;
Mais je n'arrive pas à trouver comment faire pour que les lignes s'ajoutent automatiquement.
Si je ne mets pas un nombre de lignes avec grid-template-rows, les colonnes s'ajoutent aux colonnes. Voici mon dernier essai :

display:grid;
grid-gap: 10px;
grid-auto-flow:column;
grid-template-columns: repeat(2, 50% 50%);
grid-auto-column: 50%;

Que faut-il ajouter pour que de nouvelles lignes soient créées automatiquement au fur et à mesure du remplissage de la grid ?
Désolée, mais je cherche depuis des heures et m'arrache les cheveux !
Merci à la bonne âme qui voudra bien éclairer ma lanterne !

Bonsoir,

C'est le fonctionement normal de grid-auto-flow:columns , sa valeur par défaut est row et c'est ce don tu as besoin apparemment.

Cette base de code devrait se suffire:

  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap: 10px;

cdt,
GC
Modifié par gcyrillus (03 May 2021 - 23:39)

Merci pour ton aide à cette heure tardive !
Effectivement, comme ça j'ai 2 colonnes. mais j'utilisais auto-flow:columns pour que soit correctement rempli le tableau en affichant les items dans l'ordre :
item 1 item 4
item 2 item 5
item 3 item 6.
Si on ajoute item 7, une nouvelle ligne devrait se créer et item 4 devrait passer dans la colonne de gauche.

Sans, cela donne
item 1 item 2
item 3 item 4
et ainsi de suite

kamilane a écrit :
pour que soit correctement rempli le tableau en affichant les items dans l'ordre :
item 1 item 4
item 2 item 5
item 3 item 6.
Si on ajoute item 7, une nouvelle ligne devrait se créer et item 4 devrait passer dans la colonne de gauche.

Hello,

Je ne comprends pas le comportement souhaité :
- d'un côté tu souhaites bloquer le nombre de rangées à 3 et que chaque débordement de rangée crée une nouvelle colonne
- d'un autre, tu souhaites que l'item 7 crée une nouvelle rangée.

Les deux conditions réunies me paraissent contradictoires, mais je n'ai peut-être pas bien compris.

Ah non j'ai dû très mal m'exprimer !
Je ne veux pas bloquer le nbre de rangées à 3, au contraire je souhaite que les rangées s'ajoutent automatiquement au fur et à mesure qu'on ajoute des données. Donc chaque débordement doit créer une nouvelle rangée et actuellement ça me crée de nouvelles colonnes au lieu de rester à 2 colonnes.

Okay, ce que tu décris ressemble plus au Column CSS qu' a Grid, mais sans l'effet rangées.

Pour grid, il te faut un peu de js pour placer tes éléments dans la première ou seconde colonne.

Exemple possible pour garder le grid-layout avec un comptage des enfant pour déplacer les derniers sur la seconde colonne.

let grid = document.querySelector('#myGrid');
let MyGrid=document.querySelectorAll('#myGrid > *');
dispatchStyle = document.createElement('style');
let nextCol = Math.round(MyGrid.length / 2) + 1 ;
dispatchStyle.textContent= '#myGrid > :nth-child('+ nextCol  + ') ~ * {grid-column:2;}';
grid.prepend(dispatchStyle);

La feuille de style de base

div {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  grid-auto-flow:row dense;/* !!! */

}
div> * {
  grid-column:1;/* js se charge de passer les autre en colonne 2 */
}

Voici un exemple avec grid+js et un avec column. https://codepen.io/gc-nomade/pen/BaWBQvK pour te montrer l'idée.

Cdt

kamilane a écrit :
Ah non j'ai dû très mal m'exprimer !
Je ne veux pas bloquer le nbre de rangées à 3, au contraire je souhaite que les rangées s'ajoutent automatiquement au fur et à mesure qu'on ajoute des données. Donc chaque débordement doit créer une nouvelle rangée et actuellement ça me crée de nouvelles colonnes au lieu de rester à 2 colonnes.

Hello,

Ce que tu décris correspond exactement à la solution initiale proposée par gcyrillus

Mais tu ne peux pas remplir les cellules verticalement (grid-auto-flow: column) sans dire au navigateur quand s'arrêter et passer la la colonne suivante sans bidouiller (soit avec deux grilles différentes, soit avec du JS comme l'a proposé gcyrillus)
Modifié par Raphael (04 May 2021 - 17:22)

Un tout grand merci et désolée de ne répondre que maintenant, j'ai tripatouillé toute l'après-midi pour faire coller à mon problème car cela s'affichait bien sur 2 colonnes mais, ayant actuellement 7 items à afficher, il m'en mettait 5 d'un côté et 2 de l'autre alors qu'il aurait fallu 4 et 3.
Je pense que c'est parce que le nombre d'items (une liste de dossiers dans le FTP) était pris dans son total, càd dossiers pleins (visibles) et dossiers vides (cachés).
Les dossiers vides ont une class supplémentaire mais je n'arrivais pas à la faire prendre en compte dans ton script (:not() ne fonctionnait pas) alors j'ai ajouté une ligne dans le JS du plugin pour qu'il ajoute également une class aux dossiers pleins. Et là ça fonctionne.

Mais il y avait un autre souci, les items ne sont toujours pas affichés dans le sens "colonne" mais :
tiem1 item2
item3 item4
etc
Voici le lien, ce sera plus simple : http://serveurpubli-deux.kamilane.odns.fr/ARCHIVES/JOURNAL/1800-1900/

Voci ton code JS adapté (j'ignore si la class avant le :nth-child est correcte)

let grid = document.querySelector("#directory-lister");
let MyGrid = document.querySelectorAll("#directory-lister > *");
dispatchStyle = document.createElement("style");
let nextCol = Math.round(MyGrid.length / 2) + 1;
dispatchStyle.textContent =
  "#directory-lister > .full-inside:nth-child(" + nextCol + ") ~ * {grid-column:2;}";
grid.prepend(dispatchStyle);

et voici le CSS :

div#directory-lister {
    width:1210px;
	max-width: 100%;
    display: grid;
    grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row dense;
	

}
.full-inside{grid-columns:2;}

Un tout grand merci !!

Bon ... j'ai corrigé le css .full-inside car c'était grid-column:1 ... et je n'ai plus qu'une colonne ...

Un immense merci !!! Je me disais bien qu'il y avait un truc à faire de ce côté-là mais ne savais pas comment. Tu m'as retiré une sacrée épine du pied ! Tout a l'air de bien fonctionner, je finirai de tester demain.
Encore merci et bonne nuit !