为什么CSS网格项目会随机开始堆叠在一起

Question

如您所见https://jsfiddle.net/97yo2hc3/2/，我们有一个网格用于演示，其中包含一些占位符项。对于数量较少(<150ish(的项目，此操作效果良好。然而，对于大量的这些项，如果你滚动到网格的末尾，你可以看到它是如何停止扩展并开始将div堆叠在一起的。为什么会这样？这是网格行端的误用吗(我将其作为设计的一部分https://medium.com/@andyb赤足/a-mastery-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;
}

重叠

Answer 1

在这种情况下，网格行结束是不必要的(除非您被要求使用它？(。

正如您在这里看到的，您可以将网格行的末尾跨度操作为20，您将看到它将一直执行到页面底部。相反，您可以只调整bdiv的高度(如下所示(，它将在没有重叠的情况下产生相同的整体效果。

.b {
height: 350px;
}