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

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

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 !!