使网格项跨越到隐式网格中的最后一行/列

Question

当我不知道行数时，是否可以使网格项从第一行跨越到最后一行？

假设我有以下带有未知数量框的 html。

我怎样才能使第三个 .box 从第一条网格线跨越到最后一条？

 .container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

 <div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

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

Answer 1

您可以将 grid-row-start 添加到该框的 css，并将其设置为跨越一个荒谬的高数字。

 .container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
  grid-row-start: span 9000;
}

 <div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

编辑 - 免责声明：

这是一个非最优的解决方案，并不适用于所有浏览器，请小心！尽管这在某些浏览器 (Chrome) 中似乎可行，但其他浏览器 (Firefox) 会创建荒谬的行数，从而导致问题。

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

Answer 2

当我不知道行数时，是否可以使网格项从第一行跨越到最后一行？

当前规范（级别 1）中似乎缺少针对此问题的自然网格解决方案。所以答案是“否”，严格使用 Grid 属性。

但是，正 如此答案 中所指出的，绝对定位可能是可行的。

---

虽然 CSS Grid 不能使网格区域跨越 隐式网格 中的所有列/行，但它可以在 显式网格 中完成这项工作。

使用负整数。

以下是 CSS 网格规范中两个有趣的部分：

7.1.显式网格

网格放置属性中的数字索引从显式网格的边缘开始计数。正指标从起始端算起，负指标从结束端算起。

和这里…

8.3.基于行的位置： grid-row-start ， grid-column-start ， grid-row-end grid-column-end

如果给出一个负整数，它会从显式网格的结束边缘开始反向计数。

换句话说，在处理显式网格时，这是您使用这些属性定义的网格：

• grid-template-rows
• grid-template-columns
• grid-template-areas

…您可以通过设置此规则使网格区域跨越所有列：

 grid-column: 3 / -1;

这告诉网格区域从第三列线跨越到最后一列线。

反过来是：

 grid-column: 1 / -3;

同样，此方法仅适用于显式网格。

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