css - 在 CSS 网格布局中，我们是否甚至从隐式网格线开始计算跨度？

Question

这个问题是关于 CSS 网格是否“跨度计数”——它是否应该从隐式网格线上开始。在 CSS Definitive Guide, 4th Ed, p. 695 ，据说

box4 is where things really get interesting. It ends on the fifth row line, which is to say the second implicit grid line. It spans back three lines—and yet, it still starts on the same grid line as box3. This happens because spans have to start counting within the explicit grid. Once they start, they can continue on into the implicit grid (as happened with box2), but they cannot start counting within the implicit grid.

这是真的吗？还是规范发生了变化？ “跨度计数”可以在隐式网格中开始吗？

书中使用的代码有点令人困惑:

.box04 {grid-column: 4; grid-row: span 2 / 5;}

而 the online code on Github.com用过的:

.box04 {grid-column: 4; grid-row: span 4 / 5;}

(所以我确实看到它从第 5 行网格线开始计数，并开始向后计数 4 步 从这个隐式网格线 5 开始，规则是“我们不应该从隐式网格线开始计数” . 所以是规则改变了还是规则不是那样的？)。

为了得到书上的结果，它需要是 4 / 5而不是 2 / 5 ，书上的文字说“向后跨三行”——不应该是向后跨4或2行吗？如果我们不能计算隐式网格，那么真的应该是 2 / 5 ，但如果我们可以计算隐式网格，那么它应该是 4 / 5 .那么规范有变化吗？而“三行”可能是一个错字？因此，如果我们需要跨越 4，那么这可能意味着我们从隐式或显式网格线开始计算？

代码有点长，我们可以看看 box04 :

html {
  background: #DDD;
}

body {
  padding: 2em;
  margin: 0;
  box-sizing: border-box;
  background: white;
}

ul.grid {
  padding: 0;
  margin: 0;
}

.grid.boxed {
  border: 1px solid black;
}

.grid.boxed.lines {
  padding: 1px 0 0 1px;
}

.grid.small *[class^="box"] {
  font-size: 1em;
  font-weight: normal;
  padding: 0.25em;
  border-width: 0.167em;
}

*[class^="box"] {
  border: 0.33em solid;
  font: bold 2em Arvo, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

*[class^="box"][class*="01"] {
  color: rgb(255, 0, 0);
  background: rgba(255, 0, 0, 0.1);
}

*[class^="box"][class*="02"] {
  color: rgb(255, 128, 0);
  background: rgba(255, 128, 0, 0.15);
}

*[class^="box"][class*="03"] {
  color: rgb(216, 168, 0);
  background: rgba(216, 168, 0, 0.2);
}

*[class^="box"][class*="04"] {
  color: rgb(0, 128, 0);
  background: rgba(0, 128, 0, 0.1);
}

*[class^="box"][class*="05"] {
  color: rgb(0, 0, 255);
  background: rgba(0, 0, 255, 0.1);
}

*[class^="box"][class*="06"] {
  color: rgb(128, 0, 128);
  background: rgba(128, 0, 128, 0.1);
}

span[class*="gridline"] {
  border: 1px dashed;
  margin: -1px 0 0 -1px;
}


/* for print preview/production
body:hover {filter: saturate(0%);}
 */

#grid {
  grid-auto-rows: 2em;
  grid-auto-columns: 5em;
  width: 35em;
}

#grid {
  display: grid;
  grid-template-rows: 2em 2em;
  grid-template-columns: repeat(6, 4em);
}

.box01 {
  grid-column: 1;
  grid-row: 1 / 4;
}

.box02 {
  grid-column: 2;
  grid-row: 3 / span 2;
}

.box03 {
  grid-column: 3;
  grid-row: span 2 / 3;
}

.box04 {
  grid-column: 4;
  grid-row: span 4 / 5;
}

.box05 {
  grid-column: 5;
  grid-row: span 6 / 5;
}

.box06 {
  grid-column: 6;
  grid-row: -1 / span 3;
}

.box07 {
  grid-column: 7;
  grid-row: span 3 / -1;
}

span[class*="box"] {
  z-index: 1;
}

span.explicit {
  background: #DDD;
  grid-area: 1 / 1 / 3 / 7;
}

<div class="grid gridlines" id="grid">
  <span class="box01">1</span>
  <span class="box02">2</span>
  <span class="box03">3</span>
  <span class="box04">4</span>
  <span class="box05">5</span>
  <span class="box06">6</span>
  <span class="box07">7</span>
  <span class="explicit"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
  <span class="gridlines"></span>
</div>

Answer 1

Can "span counting" start within implicit grid?

不，我们开始考虑显式网格而不是隐式网格。关注最重要的单词 start，因为显式网格始终是引用，而隐式网格只是为了包含所有内容而创建的额外列/行的结果。
如我 explained here我们不能考虑隐式网格，因为我们很容易遇到未定义的行为。
开始考虑显式网格并不一定意味着我们将在显式网格内。阅读到最后以理解这一部分。

来自 the specification :

Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side (starting from 1 for the start-most explicit line), while negative indexes count from the end side (starting from -1 for the end-most explicit line).

和

When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid... ^ref

让我们举一些例子来更好地理解。
这是一个包含 3 个显式行(4 行)且未创建隐式行的网格:

.box {
  display:grid;
  grid-gap:5px;
  grid-template-rows:repeat(3,50px);
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:200px; /* This wil never be used */
  border:1px solid;
}
.a {
  grid-row:span 2/3;
  background:red;
}
.b {
  grid-row:span 2/4;
  background:red;
}
.c {
  grid-row:1/4;
  background:red;
}

<div class="box">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div> 

.a在第 3 行结束并跨回 2 行。与 .b 相同但在第 4 行结束。对于 .c我们从 1开始至 4 .
让我们通过制作 .c 创建一个隐式网格直到 5

.box {
  display:grid;
  grid-gap:5px;
  grid-template-rows:repeat(3,50px);
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:200px; /* This is used for the implicit row */
  border:1px solid;
}
.a {
  grid-row:span 2/3;
  background:red;
}
.b {
  grid-row:span 2/4;
  background:red;
}
.c {
  grid-row:1/5;
  background:red;
}

<div class="box">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

请注意 .a和 .b没有移动，在这种情况下这是微不足道的，因为我们在底部添加了一条线，因此不会在显式网格周围看到任何技巧。
现在让我们在开头添加一个隐式网格:

.box {
  display:grid;
  grid-gap:5px;
  grid-template-rows:repeat(3,50px);
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:200px; /* This is used for the implicit row */
  border:1px solid;
}
.a {
  grid-row:span 2/3;
  background:red;
}
.b {
  grid-row:span 2/4;
  background:red;
}
.c {
  grid-row:span 4/4;
  background:red;
}

<div class="box">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

现在很有趣，因为我们可以看到 .a和 .b不再从 3 和 4 开始考虑隐式网格，但它们在显式网格中进行!
对于 .c我们从 4 线开始但我们需要 4行和我们的网格只包含 3所以我们生成隐式行并在那里继续计数。
基本上，我们有以下步骤:

我们有显式网格

我们将元素放置在显式网格中(我们开始计数)。直到现在还没有隐式网格

我们开始计数，如果我们到达边缘并且没有更多的行，我们就会添加新的行。创建隐式网格。

另一个例子:

.box {
  display:grid;
  grid-gap:5px;
  grid-template-rows:repeat(3,50px);
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:10px; /* This is used for the implicit row */
  border:1px solid;
}
.a {
  grid-row: 2/span 6;
  background:red;
}
.b {
  grid-row:span 2/4;
  background:red;
}
.c {
  grid-row:span 4/4;
  background:red;
}

<div class="box">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

如果您检查代码，您可以轻松地可视化显式网格(行高度为 50 像素)和隐式网格(行高度为 20 像素)。我们 开始 考虑显式网格的计数，我们可能会以隐式网格结束。

在上面，我们总是认为开始(或结束)是一个我们可以在显式网格内轻松识别的数字，只有 span更大。现在让我们考虑开始(或结束)也比显式网格中定义的线更大的数字的情况。

.box {
  display:grid;
  grid-gap:5px;
  grid-template-rows:repeat(3,50px);
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:10px; /* This is used for the implicit row */
  border:1px solid;
}
.a {
  grid-row: 1/span 2;
  background:red;
}
.b {
  grid-row:span 10/8;
  background:red;
}
.c {
  grid-row:span 2/4;
  background:red;
}

<div class="box">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

在这种情况下，我们定义了 .b结束于 8并跨回来 10但是显式网格中没有第 8 行。然后我们将创建额外的隐式行以获得第 8 行，我们将从那里开始计数并返回 10 行。
所以我们从隐式网格开始计数!？
是和否。我们使用显式网格来计算线数以识别第 8 行(因此我们的引用始终是显式网格)然后当我们到达边缘时，我们添加了更多的线以达到 8，然后从那时起我们返回并创建更多开头的隐式行。
如果我们考虑隐式网格的最终结果，我们不能说我们从隐式网格开始计数(你可以清楚地看到它不是隐式网格中的第 8 行，而是最后一个，第 11 行)而是如果我们考虑到第 8 行是在隐式网格内创建的，那么我们可以说我们的起点是一条隐式网格线。
我们的引用始终是显式网格，以便识别开始/结束线，但我们可能会将我们的线作为隐式网格线而不是显式网格线结束。

box4 is where things really get interesting. It ends on the fifth row line, which is to say the second implicit grid line. It spans back three lines—and yet, it still starts on the same grid line as box3. This happens because spans have to start counting within the explicit grid. Once they start, they can continue on into the implicit grid (as happened with box2), but they cannot start counting within the implicit grid.

the book said "spans back three lines" -- shouldn't it be span back 4 or 2 lines?

这里是语言问题。来自 the specification :

grid span

How many grid tracks the grid item occupies in each axis

然后

Grid track is a generic term for a grid column or grid row—in other words, it is the space between two adjacent grid lines.

所以 span 4表示 4 行或 4 列，这是明确的，但如果我们尝试将其与线条一起使用，它可能会产生歧义，因为我们将涉及 5 条线，我们的元素将仅穿过其中的 3 条，而边缘有 2 条。也许这本书在说“跨越三行”时指的是 3 条中间线并省略了边缘的那些。换句话说，元素重叠(跨越)只有 3 行。