grid-row: 1 / -1 实际上是如何工作的？（需要参考资料）

Question

一般来说，我习惯于引导前端设计。大约半年以来，我一直在使用 css 网格布局。我没有像以前那样遇到任何问题或者我不这么认为

我读了一些文章来了解 grid-row: 1 / -1 到底是如何工作的或者它的行为..也许我会跳过它...也许这是一个坏问题或者已经在这里回答了

.grid-container > div.item span { grid-row: 1 / -1 ; not working }不工作...

笔记：

1. grid-row: 1 / span number.. 不能解决问题。（段落标签数量未定义）。
2. 如果我写 grid-row: 1 / 99999 .. 更高的数字。它会解决我的问题..也许这是不好的做法...
3. 网格行：1 / -1。不工作...

需要对其行为的清晰解释或可靠的源文档

.grid-container {
  display: grid;
  grid-template-columns: repeat(2,1fr)  ;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  animation: mymove 5s infinite;
}

.grid-container > div.item {
   display: grid;
  grid-template-columns: max-content 1fr ;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.grid-container > div.item span {
      /* grid-row: 1 / -1 ; not working */
     grid-row: 1 / 99999;
}

<div class="grid-container">
  <div class="item">
      <span style="writing-mode: vertical-rl;">Tex</span>
    <h4 style>Title</h4>
    <p>Pargraph</p>
     <p>Pargraph</p>
  </div>
  <div class="item">
      <span style="writing-mode: vertical-rl;"> Tex</span>
    <h4>Title</h4>
    <p>Pargraph</p>
     <p>Pargraph</p>
     <p>Pargraph</p>
  </div>
</div>

Answer 1

grid-row:1/-1意思grid-row-start:1是grid-row-end:-1and 如果你检查规范你可以读到：

\n

\n

网格放置属性中的数字索引从显式网格的边缘开始计数的边缘开始计数。正索引从开始侧开始计数（对于最开始的显式行从 1 开始），而负索引从结束侧开始计数（对于最结束的显式行从 -1 开始）。

\n

\n

诀窍是显式网格。在您的情况下，您没有定义任何显式行，您的元素将自动放置生成新行，我们称之为隐式网格

\n

\n

grid-template-rows、grid-template-columns 和 grid-template-areas 属性定义形成显式网格的固定数量的轨道。当网格项位于这些边界之外时，网格容器通过向网格添加隐式网格线来生成隐式网格轨道。这些线与显式网格一起形成隐式网格。

\n

\n

和

\n

\n

...如果这些属性未定义任何显式轨迹，则显式网格在每个轴中仍包含一条网格线。

\n

\n

因此，grid-row:1/-1在放置所有元素后不会考虑网格结构，但会在放置任何元素之前考虑网格的初始定义，并且该网格包含 2 列（由grid-template-columns: max-content 1fr）和 0 行。

\n

有关的：如何跨越到隐式网格中的最后一列？

\n