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

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

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

当前规范(级别1)似乎缺少对此问题的自然网格解决方案.所以答案是"不",严格来说是网格属性.

但是,正如在这个答案中指出的那样,绝对定位是可能的.

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

使用负整数.

以下是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;

同样,此方法仅适用于显式网格.

Answer 2

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

.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)会创建导致问题的荒谬行数.

Answer 3

一个对我来说真正有效的解决方案是设置position: absolute;你想要增长到最后的元素。这有其缺点，但在某些情况下它可能是救星。这是一个完整的示例：

.grid {
  display: grid;
  grid-template: auto / auto 22px auto;
  position: relative;
}

.vline {
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: black;
  grid-column: 2 / span 1;
  margin: 0 10px;
}

.grid h1:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
.grid p:nth-child(2) { grid-row: 2; grid-column: 1; text-align: right; }
.grid h1:nth-child(3) { grid-row: 3; grid-column: 3; }
.grid p:nth-child(4) { grid-row: 4; grid-column: 3; }
.grid h1:nth-child(5) { grid-row: 5; grid-column: 1; text-align: right; }
.grid p:nth-child(6) { grid-row: 6; grid-column: 1; text-align: right; }
.grid h1:nth-child(7) { grid-row: 7; grid-column: 3; }
.grid p:nth-child(8) { grid-row: 8; grid-column: 3; }
p, h1 { margin: 0; padding: 0; }

<div class="grid">
  <h1>1.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>2.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h1>3.</h1>
  <p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>4.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <div class="vline"></div>
</div>