为什么在此多行网格项目上忽略网格间隙？

Question

考虑以下示例：

div {
  border: 1px solid black;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container > div {
  min-height: 40px;
}

.item3 {
  grid-row: span 3;
}

.item4 {
  grid-column: span 2;
}

.item5 {
  grid-row: span 3;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

第5个元素上的grid-gap为什么这样工作？好像间隙现在是元素的一部分。我希望该元素的底端与第7个元素的底端对齐。第三个元素可以正常工作。这是Fiddle。

修改 如果期望的效果是显示最后一行（隐式），则解决方案是添加grid-auto-rows: 1fr;。参见Fiddle。

Answer 1

在第5项中，您有grid-row: span 3。

您只需要span 2。

使用span 3，您已经创建了一个额外的行，第五个项目跨越了该行。

第7项和第8项没有设置得那么远。

请注意，网格应具有5行行（创建3行），但是第5项上的span 3将创建不必要的第6行行（创建4行）。

项目3的span 3正常工作。

div {
  border: 1px solid black;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container > div {
  min-height: 40px;
}

.item3 {
  grid-row: span 3;
}

.item4 {
  grid-column: span 2;
}

.item5 {
  grid-row: span 2; /* adjustment */
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

span关键字

请记住，span对行/列行进行计数。

所以再次参考图片：

• grid-column: 1 / span 4，将跨越整个网格，并创建一个额外的列。

• grid-row: 2 / span 3，将从第二行开始遍及整个网格。

• grid-row: 3 / span 3，将覆盖整个网格，从第三行开始，并创建一个额外的行（例如问题中的问题）

More about the span keyword in the spec

Answer 2

因为.item5只有两行，而不是三行。由于您将跨度设置为3，因此将额外的间隙设置为“多余”，因此会自动创建“额外”行。

div {
  border: 1px solid black;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container>div {
  min-height: 40px;
}

.item3 {
  grid-row: span 3;
}

.item4 {
  grid-column: span 2;
}

.item5 {
  grid-row: span 2;
  /* not three */
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>