使网格项目跨度到最后一行/最后一列

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

您可以将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>

Answer 2

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

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

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

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

使用负整数。

这是CSS Grid规范中的两个有趣的部分：

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;

同样，此方法仅在显式网格中有效。