你可以通过显示.third来让它被网格放置“忽略”：内容。它的直接子项，而不是它，然后被考虑放置在网格中。
然后，为了得到.fifth的孩子，你需要让.fifth本身成为一个网格。

.parent {
  display: grid;
  width: 100vw;
  aspect-ratio: 2 / 1;
  grid-columns: repeat(4, 1fr);
  grid-rows: repeat(4, 1fr);
  grid-template-areas: 'div1 div1 div2 div2' 'div1 div1 div2 div2' 'div5 div5 div5 div5' 'div5 div5 div5 div5';
}

.parent * {
  border: solid white 1px;
}

.third {
  display: contents;
}

.second {
  background: brown;
  grid-area: div1;
}

.fourth {
  background: teal;
  grid-area: div2;
}

.sixth {
  background: green;
  grid-area: div3;
}

.seventh {
  background: green;
  grid-area: div4;
}

.fifth {
  background: navy;
  grid-column: 1 / span 4;
  grid-row: 3 / span 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas: 'div3 div3 div3 div3' 'blank blank div4 div4';
}

<div class="parent">
  <div class="second"></div>
  <div class="third">
    <div class="fourth"></div>
    <div class="fifth">
      <div class="sixth"></div>
      <div class="seventh"></div>
    </div>
  </div>
</div>