CSS网格仅更改cols宽度的一行

Question

我有这样的网格：

如何使第三行cols大小相等，以便它们占据整个宽度？

SCSS：

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-cols: fit-content(100%);

  & > * {
        border: 5px solid black;
        display: flex;
        align-items: center;
        justify-content: center;
    }

  .col-1 {
    grid-column: 1 / 5;
  }
}

Answer 1

可能使用嵌套网格吗？​​

HTML：

<div class="grid-container">
<div class="item1">Top Row</div>
<div class="item2">Middle Row</div>
<div class="item3">Middle Row</div>
<div class="item4">Middle Row</div>
<div class="item5">Middle Row</div>
<div class="item6">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
</div>

CSS：

.item1 { grid-area: toprow; }
.item2 { grid-area: mid1; }
.item3 { grid-area: mid2; }
.item4 { grid-area: mid3; }
.item5 { grid-area: mid4; } 
.item6 { grid-area: bottomrow; }

.grid-container {
  display: grid;
  grid-template-areas:
    'toprow toprow toprow toprow'
    'mid1 mid2 mid3 mid4'
    'bottomrow bottomrow bottomrow bottomrow';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 30px;
}

.item6 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
}