How can I implement a grid system in my divs using CSS Grid?

Question

I want to create a div with 2 columns, when I add an item in the parent div it should be in the first column, when the first column has 3 elements and I want to add other items it should Located in the second column. This is the image I'm looking for:

I found no response on the internet, I tried the css grid generator but without any results..

CSS Grid Generator but I can't get the right answer

Answer 1

Ok...it looks like you just have a problem with mesh flow. To change it, use grid-auto-flow:column; That's it, the grid's flow will change from rows to columns. You can change grid-template-rows as needed.

Answer 2

What you need to do in html is:

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

and CSS:

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

Demo