Html CSS网格自动拟合+；minmax添加幻影行

Chrome的CSS网格中似乎有一个奇怪的bug（Firefox中没有）。对网格模板列样式使用repeat（自动拟合，最小值（300px，1fr））时会发生这种情况。出于某种原因，尽管只有两个子div，但父div认为存在另一个元素，并生成大量空白和不必要的网格间隙。你知道如何合法地解决这个问题，而不必做出令人讨厌的修正吗

下面是对这个bug的再创造：

---

在这种情况下使用

自动填充时，Chrome和Firefox/Edge之间似乎存在渲染差异。以下是一个可能的解决方法：

使用更明确的列大小和媒体查询。

.two_item_grid_container {
     display: grid;
     grid-template-columns: repeat(2, minmax(300px, 1fr));
     grid-auto-rows: auto;
     grid-gap: 20px;
}

@media ( max-width: 500px ) {
  .two_item_grid_container {
     grid-template-columns: 1fr;
  }
}

您应该发布足够的代码，以便我们可以重现问题。@Michael\B请参见上面的编辑。有一个链接指向我制作的codepen演示，它显示了这个问题。@关于调试代码的悬而未决的问题需要将代码包含在问题中；与非现场演示的链接不充分。相关：@Michael_B I最终向Chrome开发团队报告了该漏洞，他们确认这是一个漏洞，但已经为Chrome v63及以上版本修复；因此，当它公开推出时，问题就不那么严重了。谢谢迈克尔！这似乎是Chrome终端上的一个bug。你能告诉我到底发生了什么吗？Chrome似乎正在为预期入住率创造轨道。不知道为什么。因此，当你的第二件物品包装好时，Chrome已经预留了空间。在这种情况下，Firefox和Edge似乎更明智。可能有一个自然的解决办法，但我不知道它可能是什么。我测试了
自动填充
和flexbox，但两者都没有让事情变得更简单。所以我使用了媒体查询锤。这很不幸，我希望避免一个工作，但我想我还是需要设置媒体查询。谢谢你的帮助！
.two_item_grid_container {
     display: grid;
     grid-template-columns: repeat(2, minmax(300px, 1fr));
     grid-auto-rows: auto;
     grid-gap: 20px;
}

@media ( max-width: 500px ) {
  .two_item_grid_container {
     grid-template-columns: 1fr;
  }
}