CSS Grid：动态跨越最后一列

Question

是否可以自动跨越最后一列以占据网格中的剩余空间？基本上我正在努力实现这一目标：

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.col {
  background: blue;
  padding: 20px;
  border: 1px solid red;
}

.col:last-child {
  background: yellow;
  /* missing magic here */ 
}

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
</div>

Answer 1

不幸的是，在当前版本的 CSS 网格中，似乎没有真正的魔法grid-column: span auto / -1作为通用解决方案。但是对于 3x1 网格的这种特殊情况，您可以执行以下操作：

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.col {
  background: blue;
  padding: 20px;
  border: 1px solid red;
}

.col:last-child {
  background: yellow;
  grid-column-end: -1;
}
.col:nth-child(1):last-child {
  grid-column-start: 1;
}
.col:nth-child(2):last-child {
  grid-column-start: 2;
}

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
</div>