CSS Grid auto-fit + minmax 添加幻像行

Question

Chrome 的 CSS 网格中似乎存在一个奇怪的错误（在 Firefox 中不会发生）。当使用 repeat(auto-fit, minmax(300px, 1fr)) 作为 grid-template-columns 样式时会发生这种情况。出于某种原因，即使只有两个子 div，父 div 也会认为还有另一个元素并生成大量空白和不必要的网格间隙。知道如何在不进行 janky 修复的情况下合法地解决此问题吗？

以下是该错误的重现： https://codepen.io/rantis/full/gXxxRB/

.two_item_grid_container {
  repeat(auto-fit, minmax(300px, 1fr));
  /* If you reduce the min size to 45px the grid fixes itself for some reason */
}

Answer 1

在这种情况下使用auto-fill 时，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;
  }
}

revised codepen