Codepen: https://codepen.io/saerts/pen/poBxzNR
I have an HTML setup like this:

<div class="container">
  <div class="block top">Top</div>
  <div class="block main">Main 1/3</div>
  <div class="block main">Main 2/3</div>
  <div class="block bottom">Bottom</div>
</div>

My CSS is :

.container{
  height: 100%;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 8px;
}
.top{
  grid-row: 1;
  grid-column: 1 / -1;
}
.bottom{
  grid-row: 3;
  grid-column: 1 / -1;
}
.main{
  grid-row: 2;
  grid-column: 1 / 2;
      
  &:nth-child(2){
    grid-column: 2 / 4;
  }
}
.block{
  padding: 8px;;
  background: lightgrey;
  border: 1px solid red;
}

Why does the 2nd div.main (1/3) shows up in another order than expected?