为什么CSS网格项目会随机开始彼此堆叠？

Question

您可以在https://jsfiddle.net/97yo2hc3/2/的小提琴中看到，我们有一个带有一些占位符项目的演示网格。如果物品数量较少（<150欧元），则效果很好。但是，如果有大量这些项，则滚动到网格的末尾，可以看到它停止扩展的方式，只是开始将div相互堆叠。为什么会这样呢？这是网格行尾的错误应用吗（我将其用作此设计https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb的一部分）？感谢您提供任何见识！

/* Grid css */
.a {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.b {
  grid-row-end: span 20;
}

OVERLAPPING

Answer 1

在这种情况下，不需要网格行末（除非要求您使用它？）。

如您所见here，您可以将网格行尾跨度控制为20，您会发现它将一直执行到页面底部。取而代之的是，您只需调整b div的高度（如下所示），它就会产生相同的整体效果而不会重叠。

   .b {
  height: 350px;
}