当我不知道行数时，是否可以使网格项从第一行跨越到最后一行？
在current spec（级别1）中似乎缺少一个自然的网格解决方案，所以答案是“不”，严格地说是网格属性。
然而，如this answer中所指出的，绝对定位也是可能的。
虽然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;

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

您可以将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）会创建荒谬的行数，从而导致问题。

一个实际上对我有效的解决方案是在你想要增长到最后的元素上设置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>

因此，如果这似乎还不可能，您可以选择更改结构并嵌套网格。
使用JavaScript取出第三个框，并将其放置在原始网格容器旁边，如果您无法提前这样做的话。

.container {
    display: grid;
    grid-template-columns: 65% 35%;
}

.nested_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-rows: auto;
}

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

.side {
    background-color: yellow;
    grid-column: 1 -1;
    border: 1px solid red;
}

<div class="container">
    <div class="nested_grid">
        <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 class="box"></div>
        <div class="box"></div>
    </div>
    <div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>

对于2022年在这里的人：
OP声明他们在问题标题中使用隐式网格，但在代码示例中，他们使用以下内容定义网格：grid-template-columns和grid-template-rows，它们被w3.org定义为显式网格属性。
也就是说，这里有一个跨越n number of rows的解决方案。
(Or列，只需根据需要将rows替换为columns）
如上所述，您可以简单地在网格项上设置grid-column-end: -1以实现全列跨越。早期的答案使其有点复杂，并且可能在他们的示例中过于复杂。
要跨越所有行网格项：

#item {
  grid-row-start: 1;
  grid-row-end: -1;
}

下面是一个工作代码片段：
x一个一个一个一个x一个一个二个x