grid cell gets pushed down to the next row

So I just started trying out the grid display, but for some reason with this basic of a code.

    div{
        padding: 50px;
        margin: 10px;
        border: 5px solid black;
    }
    
    .grid{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    
    .grid-header{grid-column: 1 / span 3;}
    
    .grid-main{grid-column: 1 / span 2;}

I keep getting this as a result though.

Result

but what I want is for it to look like this

Intended

Here's the full code if it helps.

<html>

<head>
  <style>
    div {
      padding: 50px;
      margin: 10px;
      border: 5px solid black;
    }
    
    .grid {
      display: grid;
      grid-template-columns: auto auto auto;
    }
    
    .grid-header {
      grid-column: 1 / span 3;
    }
    
    .grid-main {
      grid-column: 1 / span 2;
    }
  </style>
</head>

<body>
  <div class="grid">
    <div class="grid-header"></div>
    <div></div>
    <div class="grid-main"></div>
    <div class="grid-main"></div>
    <div></div>
  </div>
</body>

</html>

Solution

I have changed one div's class grid-main to grid-main2. Let me know if face any issue

<html>

<head>
  <style>
    div {
      padding: 50px;
      margin: 10px;
      border: 5px solid black;
    }
    
    .grid {
      display: grid;
      grid-template-columns: auto auto auto;
    }
    
    .grid-header {
      grid-column: 1 / span 3;
    }
    
    .grid-main {
      grid-column: 2 / span 2;
    }
    .grid-main2 {
      grid-column: 1 / span 2;
    }
  </style>
</head>

<body>
  <div class="grid">
    <div class="grid-header"></div>
    <div></div>
    <div class="grid-main"></div>
    <div class="grid-main2"></div>
    <div></div>
  </div>
</body>

</html>

One more solution is possible with your existing html without changing class. Here is the css:

div {
  padding: 50px;
  margin: 10px;
  border: 5px solid black;
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
}

.grid-header {
  grid-column: 1 / span 3;
}
.grid-main:nth-child(3) {
  grid-column: 2 / span 2;
}
.grid-main:nth-child(4) {
  grid-column: 1 / span 2;
}