考虑以下示例:



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

最佳答案

在项目5上,您具有grid-row: span 3

您只需要span 2

使用span 3,您已经创建了一个额外的行,第五行跨入该行。

项7和8的跨度没有那么长。

请注意,网格应具有5行行(创建3行),但是项目5上的span 3创建不必要的第6行行(创建4行)。

css - 为什么在此多行网格元素上忽略网格间隙?-LMLPHP

项目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计算行/列行。

因此,再次参考图片:

css - 为什么在此多行网格元素上忽略网格间隙?-LMLPHP


grid-column: 1 / span 4,将跨越整个网格,并创建一个额外的列。
grid-row: 2 / span 3,将从第二行开始遍及整个网格。
grid-row: 3 / span 3,将从第三行开始沿整个网格延伸,并创建一个额外的行(例如问题中的问题)


More about the span keyword in the spec

09-25 17:11
查看更多