有没有办法让 css 网格项扩展到所有可用列？

【问题标题】：Is there a way for a css grid item to stretch to all available columns?有没有办法让 css 网格项扩展到所有可用列？
【发布时间】：2022-10-14 20:49:43
【问题描述】：

我正在尝试设计这样的布局：

当有 3 个网格项目时，我希望它们像第一张图片一样堆叠。当有 2 个时，我希望它们像第二张图片中那样堆叠，当只有 1 个项目时，它应该占用所有可用空间。这应该是动态和自动.

我使用 CSS 网格非常接近，但不幸的是，当它只是紫色项目时，它不起作用。有什么办法可以做到这一点？（请不要建议使用 flexbox 或其他解决方案。我知道并需要这种确切的行为）

【问题讨论】：

显示您的 css 和 html 失败，以便社区可以提供编辑。 SO 将提供一个“运行片段”命令，以便可以在此页面上看到结果。

标签： css

【解决方案1】：

如果你给和元素grid-column: 1 / -1;，它将占用行上的所有列

这是一个简单的例子

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.cell {
  background-color: lightgrey;
  height: 64px;
}

.cell--special {
  background-color: purple;
  grid-column: 1 / -1;
}

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell cell--special"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

【讨论】：