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

Question

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

I did not find a response in internet,I've tried css grid generator but nothing..

Css grid generator but I can't have a correct answer

Answer 1

All 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