CSS Grid columns starts on the same row-CodePudding

I'm trying to make each column of my css grid facing each other : making it look like that:

 --- --- 
| A | D |
 --- --- 
| B | E |
 --- --- 
| C | F |
 --- ---

Instead of :

 --- --- 
| A |   |
 --- --- 
| B |   |
 --- --- 
| C | D |
 --- --- 
|   | E |
 --- --- 
|   | F |
 --- ---

I've tried to play with the grid-row and I'd like to avoid placing them with an id

.container{
  display: grid;
  grid-template-columns: auto auto;
  background: yellow
}

.left {
  grid-column: 1;
  background:green;
}

.right{
  grid-column : 2;
  background: olive
}

<div >
  <div >A</div>
   <div >B</div>
   <div >C</div>
  
  <div >D</div>
  <div >E</div>
  <div >F</div>
</div>

CodePudding user response：

Just tell the container to flow in columns.

grid-auto-flow:column;

.container {
  display: grid;
  grid-template-columns: auto auto;
  background: yellow;
  grid-auto-flow: column;
}

.left {
  grid-column: 1;
  background: green;
}

.right {
  grid-column: 2;
  background: olive
}

<div >
  <div >A</div>
  <div >B</div>
  <div >C</div>

  <div >D</div>
  <div >E</div>
  <div >F</div>
</div>

CodePudding user response：

If you can amend your HTML, you can try this instead to put parent wrappers around left and right.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.left div { 
  background: yellow;
  border: 1px solid black;
}
.right div { 
  background: lime;
  border: 1px solid black;
}

<div >
      <div >
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <div >
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
</div>

CodePudding user response：

Modified with added some classes , you can try to use 'grid-column' along with 'grid-row-start' to choose on which row to arrange the div to.

Reference as follow : https://www.w3schools.com/CSSref/pr_grid-column.asp

.container{
  display: grid;
  grid-template-columns: auto auto;
  background: yellow
}

.left {
  background:green;
}

.right{
  background: olive
}

.left1 {
  grid-column: 1 / 3;
}
.left2 {
  grid-column: 1 / 3;
}
.left3 {
  grid-column: 1 / 3;
}
.right1 {
grid-row-start:1;
  grid-column: 3 / 5;
}
.right2 {
grid-row-start:2;
  grid-column: 3 / 5;
}
.right3 {
grid-row-start:3;
  grid-column: 3 / 5;
}

<div >
  <div >A</div>
   <div >B</div>
   <div >C</div>
  
  <div >D</div>
  <div >E</div>
  <div >F</div>
</div>