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

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>

Answer 1

Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?

current spec 中似乎缺少针对此问题的自然网格解决方案(1级)。所以答案是“否”，严格使用 Grid 属性。

但是，正如 this answer 中指出的那样, 绝对定位可能是可能的。

---

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

使用负整数。

这是 CSS 网格规范中两个有趣的部分:

7.1. The Explicit Grid

Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side, while negative indexes count from the end side.

这里...

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

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

• 网格模板行
• 网格模板列
• 网格模板区域

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

grid-column: 3 / -1;

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

反过来就是:

grid-column: 1 / -3;

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