title: CSS Grid not working as expected with rows
body: <p>I'm trying to accomplish a grid that the 4th column takes place in the <strong>first and second row</strong> without pushing the second row lower.</p>
  
  <p>the <code>div</code> with the <code>class news7</code> is the one that should take 2 rows, but when it does it pushes the other elements in the second row below it because I have set the height to 600px, other elements are 300px.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="grid-container"&gt;
      &lt;div class="news" *ngFor="let n of (news | async)"&gt;
        &lt;div class="news1"&gt;
          &lt;SOME CODE&gt;&lt;/SOME CODE&gt;
        &lt;/div&gt;
        &lt;div class="news2"&gt;
          &lt;SOME CODE&gt;&lt;/SOME CODE&gt;
        &lt;/div&gt;
        &lt;div class="news3"&gt;
         &lt;SOME CODE&gt;&lt;/SOME CODE&gt;
        &lt;/div&gt;
        &lt;div class="news4"&gt;
         &lt;SOME CODE&gt;&lt;/SOME CODE&gt;
        &lt;/div&gt;
        &lt;div class="news5"&gt;
       &lt;SOME CODE&gt;&lt;/SOME CODE&gt;
        &lt;/div&gt;
        &lt;div class="news6"&gt;
         &lt;SOME CODE&gt;&lt;/SOME CODE&gt;
        &lt;/div&gt;
        &lt;div class="news7"&gt;
          &lt;SOME CODE&gt;&lt;/SOME CODE&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 'news1 news2 news3 news7' 'news4 news5 news6 news7' '. . . .';
    grid-row-gap: 10px;
    grid-column-gap: 10px;
  }
  
  .news1 {
    grid-area: news1;
  }
  
  .
  .
  .
  .news7 {
    grid-area: news7;
  }
  </code></pre>
  
  <p><strong>RESULT</strong>
  <a href="https://i.stack.imgur.com/DP1yu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DP1yu.png" alt="enter image description here"></a></p>