Question 175972 in Html Question posted in
Some basic documentation can be found here.

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

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 :
enter image description here

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Ok… It looks like you just have the problem of grid flow. To change it use grid-auto-flow: column; That’s it and the flow of your grid will change from rows to columns. You can change the grid-template-rows according to your desire.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search