了解网格负值

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你会陷入这样的规则：

如果网格项的放置包含两条线，并且起始线比结束线更靠尾，则交换两条线。如果开始线等于结束线，则删除结束线。^参考

所以说的grid-column:-1/-1意思grid-column:-1是grid-column:-1/auto

auto

该属性对网格项的放置没有任何贡献，表示自动放置或默认跨度为 one。（参见上文第 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>

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

使用时-2/-1很明显，您将考虑最后一行之前和 最后一行，并且元素将放置在最后一个显式列中：

.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

您的代码按预期工作的唯一原因是当开始和结束行相等时，网格错误处理算法会删除结束行。

因此1 / 1解析为1 / auto，其中auto表示默认跨度为 1。

你写了：

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

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

你写了：

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

1 / 1

如上所述，1/1无效。它由 Grid 系统固定，解析为1 / auto. 因此，您跨越了第一列。

-1 / -1

这种值的组合也是无效的。这意味着从网格的最后一行到网格的最后一行。网格错误处理将结束值更改为-1 / auto。这会将您带出显式网格（因为创建了隐式列）并且负值不再适用。负值在隐式网格开始的地方结束 ( demo )。

-2 / -1

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