Comment puis-je implémenter un système de grille dans mes divs à l'aide de CSS Grid ?

Question

Je souhaite créer un div avec 2 colonnes, lorsque j'ajoute un élément dans le div parent, il doit être dans la première colonne et lorsque la première colonne contient 3 éléments et que je souhaite ajouter d'autres éléments, il doit être dans la colonne deux. C'est l'image que je recherche :

Je n'ai trouvé aucune réponse sur internet, j'ai essayé le générateur de grille CSS mais sans aucun résultat..

CSS Grid Generator mais je n'arrive pas à obtenir la bonne réponse

Answer 1

Ok... on dirait que vous avez juste un problème avec le flux du maillage. Pour le changer, utilisez grid-auto-flow:column; 就是这样，网格的流程将从行更改为列。您可以根据需要更改grid-template-rows.

Answer 2

Ce que vous devez faire en HTML est :

<div class="parent">
   <div class="child">1</div>
   <div class="child">2</div>
   <div class="child">3</div>
   <div class="child">4</div>
   <div class="child">5</div>
   <div class="child">6</div>
</div>

et CSS :

.parent{
     display:grid;
     grid-template-columns: 1fr 1fr;
     grid-auto-flow: column;
     grid-template-rows:1fr 1fr 1fr;
 }

Démo