如何使最后一行中的项目占用 CSS Grid 中的剩余空间？

Question

有没有办法强制网格最后一行中的所有项目填充该行，无论它们有多少？

我不知道网格中的项目数量，因此我无法直接定位它们。我尝试使用 grid-auto-flow: dense ，但这并没有真正的帮助。

这是我的问题形象化： ：

 div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}

 <div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

原文由 Bondsmith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于那些只为最后一个元素寻找答案的人，如果您使用的是 tailwindcss，您可以尝试 grid-column: 1 / -1; 或 col-span-full 。

 div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}
div > span:last-of-type {
  grid-column: 1 / -1;
}

 <div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

原文由 dr_ermio 发布，翻译遵循 CC BY-SA 4.0 许可协议