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

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 {&nbsp; display: grid;&nbsp; grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;&nbsp;&nbsp; grid-template-rows: auto [last-line];}.box {&nbsp; background-color: blue;&nbsp; padding: 20px;&nbsp; border: 1px solid red;}.box:nth-child(3) {&nbsp; background-color: yellow;&nbsp; grid-column: last-col / span 1;&nbsp; grid-row: 1 / last-line;&nbsp; grid-row-start: span 9000;}<div class="container">&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box">3</div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div></div>

Answer 2

当我不知道行数时，是否可以使网格项目从第一行到最后一行？当前规范（级别1）似乎缺少针对此问题的自然网格解决方案。因此答案将是“否”，严格来说是使用Grid属性。但是，如该答案所指出的，绝对定位可能是可行的。尽管CSS网格无法使网格区域跨越隐式网格中的所有列/行，但它可以在显式网格中完成工作。使用负整数。这是CSS Grid规范中的两个有趣的部分：7.1。显式网格网格放置属性中的数字索引从显式网格的边缘开始计数。正索引从起始侧开始计数，而负索引从结束侧开始计数。和这里...8.3。基于行的展示位置：grid-row-start，grid-column-start，&nbsp; grid-row-end，和grid-column-end性质如果给定一个负整数，则从显式网格的末端开始倒数。换句话说，当处理显式网格时，即使用以下属性定义的网格：grid-template-rowsgrid-template-columnsgrid-template-areas...您可以通过设置以下规则使网格区域跨越所有列：grid-column: 3 / -1;这告诉网格区域从第三列线到最后一列线。相反的是：grid-column: 1 / -3;同样，此方法仅在显式网格中有效。