Why does third css grid column starts with second row in this codepen

Link to the codepen https://codepen.io/Pyoss/pen/ExRXVOZ
`

<div class="example_grid">
    <div class="grid-main-element grid-center"></div>
    <div class="grid-element grid-left"></div>
    <div class="grid-element grid-left"></div>
    <div class="grid-element grid-right"></div>
    <div class="grid-element grid-right"></div>
    
    
</div>

`

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

.example_grid>div {
    border: 1px solid white;
}

.grid-left {
    grid-column: 1;
    background-color: red;
}

.grid-center {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    background-color: yellow;
}

.grid-right {
    grid-column: 3;
    background-color: blue;
}


.grid-element {
    height: 100px;
}

.grid-main-element {
    height: 200px;
}

“

I could assign rows and columns manually, but I don’t understand the logic behind this behavior. I expected assigned column to take the highest row available, but it’s making one row top offset on rightmost column.

>Solution :

This is because by default, a grid has grid-auto-flow: row. It controls how auto-placed items get flowed into the grid.

More on this

If you assign a grid-auto-flow: row dense or grid-auto-flow: column to the grid container, then you would see the right column start from the top row.

When adding new item, the grid container will place it:

1. By filling rows if grid-auto-flow is not set or set as row
2. By filling columns if grid-auto-flow set as column
3. If dense is added, then attempt to fill in holes earlier in the grid

Therefore, both grid-auto-flow: row dense or grid-auto-flow: column would result in the right column moved up.

Example:

.example_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}

OR

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