html - CSS 网格无法按预期处理行

Question

我正在尝试完成第 4 列位于第一行和第二行的网格，而不会将第二行推低。

具有 class news7 的 div 应该占用 2 行，但是当它这样做时，它会将第二行中的其他元素推到它下面，因为我有设置高度为600px，其他元素为300px。

HTML

<div class="grid-container">
    <div class="news" *ngFor="let n of (news | async)">
      <div class="news1">
        <SOME CODE></SOME CODE>
      </div>
      <div class="news2">
        <SOME CODE></SOME CODE>
      </div>
      <div class="news3">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news4">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news5">
     <SOME CODE></SOME CODE>
      </div>
      <div class="news6">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news7">
        <SOME CODE></SOME CODE>
      </div>
    </div>
</div>

CSS

.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;
}

结果

Answer 1

我解决了我的问题。

问题在于我设置网格的方式以及 Angular 生成组件的方式。

HTML

<div class="grid-container">
    <div class="news" *ngFor="let n of (news | async)">
      <div class="news1">
        <SOME CODE></SOME CODE>
      </div>
      <div class="news2">
        <SOME CODE></SOME CODE>
      </div>
      <div class="news3">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news4">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news5">
     <SOME CODE></SOME CODE>
      </div>
      <div class="news6">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news7">
        <SOME CODE></SOME CODE>
      </div>
    </div>
</div>

CSS

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-areas: 'news news news news' 'news news news news' '. . . .';
    }

    .news {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas: 'news1 news2 news3 news7' 'news4 news5 news6 news7';
      grid-area: news;
      grid-column-gap: 10px;
      grid-row-gap: 10px;
    }

    .news1 {
      grid-area: news1;
    }

   .
   .
   .
   .news7 {
     grid-area: news7;
   }