了解网格负值

Question

我正在尝试制作一个底部有一个完整跨度行的网格。

对于全跨度列，我可以使用grid-column: 1/-1。

对于单跨度列，我可以使用grid-column: 1/1。

对于单跨行，我可以使用grid-row: 1/1。

但如果我要定义最后一列或最后一行，我必须写grid-column: -2/-1。

为什么第一列/行的语法与 1/1 不同？还是我在某个地方犯了错误？

我还做了一个 jsfiddle 来演示我的问题：jsfiddle

.grid-container {
  display: grid;
  grid-template-columns: 5px 1fr 1fr;
  grid-template-rows: minmax(50px, 2fr) 1fr 1fr 1fr 1fr 1fr 15px;
}

.grid-item {
  width: 1fr;
}

.header {
  display: flex;
  grid-column: 2/-1;
  grid-row: 1/1;
  justify-content: center;
}

.border-left {
  background: purple;
  grid-column: 1/1;
  grid-row: 1/-1;
}

.border-bottom {
  background: #410266;
  grid-column: 2/-1;
  /* grid-row: -2 / -1;  this will work, -1/-1 will not */
  grid-row: -1 / -1;
}

<div class="grid-container">
  <div class="header"> HEADER </div>
  <div class="border-left"></div>
  <div class="grid-item">1 </div>
  <div class="grid-item">2 </div>
  <div class="grid-item">3 </div>
  <div class="grid-item">4 </div>
  <div class="border-bottom"></div>
</div>

Answer 1

当在grid-column/grid-row 中使用相同的值时，您将落入这条规则：

如果网格项的位置包含两行，并且起始行比结束行更靠端，则交换两行。 如果起点线等于终点线，则去掉终点线。^ref

所以说grid-column:-1/-1 意味着grid-column:-1 即grid-column:-1/auto

auto

该属性对网格项目的放置没有任何贡献，表示自动放置或默认跨度为 1。 （参见上文第 8 节放置网格项目。）

所以基本上你告诉你的元素从最后一行开始并跨越一列，这将创建一个隐式的新列：

一个基本的例子来说明：

.box {
  display:grid;
  grid-template-columns:20px 20px 20px;
  grid-auto-columns:100px;
  grid-gap:5px;
}

span {
  grid-column:-1/-1;
  height:40px;
  background:red;
}

<div class="box">
  <span></span>
</div>

您可以看到跨度具有100px，这意味着它在隐式网格内创建了一个新列，而不是在20px 定义的显式网格内

当使用-2/-1时，很明显你会考虑最后一个和last行，并且元素将被放置在最后一个显式列中：

.box {
  display:grid;
  grid-template-columns:20px 20px 20px;
  grid-auto-columns:100px;
  grid-gap:5px;
}

span {
  grid-column:-2/-1;
  height:40px;
  background:red;
}

<div class="box">
  <span></span>
</div>

使用正值时也适用相同的逻辑，但您不会注意到 奇怪 行为，因为您很可能会跨越一个明确的列，认为指定是正确的，例如，grid-column:1/1

Answer 2

grid-column 和 grid-row 速记属性计算网格线。

你写的：

对于单跨度列，我可以使用 grid-column: 1/1

这没有任何意义。它解析为：

grid-column-start: 1
grid-column-end: 1

所以你定义了一个从起始行到起始行的列。

一列有一个起始行和一个结束行。所以要跨越你使用的第一列：

grid-column: 1 / 2

您的代码按预期工作的唯一原因是Grid error handling algorithm 在开始行和结束行相等时删除了结束行。

所以1 / 1 解析为1 / auto，其中auto represents a default span of 1.

---

你写的：

但是如果我想定义最后一列或最后一行，我必须写grid-column: -2/-1

是的，这是一种方法。 （您也可以使用正整数，因为您知道列数。）

---

你写的：

为什么第一列/行的语法与 1/1 不同？还是我在某个地方犯了错误？

1 / 1

如上所述，1/1 无效。它由网格系统修复，解析为1 / auto。结果，您跨越了第一列。

-1 / -1

这种值组合也是无效的。这意味着从网格的最后一行跨越到网格的最后一行。网格错误处理将结束值更改为-1 / auto。这会将您带出显式网格（因为创建了一个隐式列）和negative values no longer apply。负值在隐式网格开始处结束 (demo)。

-2 / -1

语法正确。所以它有效。从网格的倒数第二行开始跨越一列。