了解网格负值

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

     

该属性不会对网格项目的位置产生任何影响，表示自动放置或默认跨度为。 （请参见上方的§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 < / p>

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无效。它由Grid系统固定，解析为1 / auto。结果，您跨越了第一列。

-1 / -1

这些值的组合也是无效的。这表示从网格的最后一行到网格的最后一行。网格错误处理将结束值更改为-1 / auto。这将使您脱离显式网格（因为创建了隐式列）和negative values no longer apply。负值在隐式网格开始的位置（demo）结束。

-2 / -1

正确的语法。如此运作从网格的倒数第二行开始跨越一列。