CSS 网格自动调整 + minmax 添加幻像行
CSS Grid auto-fit + minmax adds phantom row
Chrome 的 CSS 网格中似乎存在一个奇怪的错误(在 Firefox 中不会发生)。当对 grid-template-columns 样式使用 repeat(auto-fit, minmax(300px, 1fr)) 时会发生这种情况。出于某种原因,即使只有两个子 div,父 div 认为还有另一个元素并生成大量空白和不必要的网格间隙。知道如何合法地解决这个问题而不进行糟糕的修复吗?
这里是错误的重现:
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 */
}
在此上下文中使用 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;
}
}
Chrome 的 CSS 网格中似乎存在一个奇怪的错误(在 Firefox 中不会发生)。当对 grid-template-columns 样式使用 repeat(auto-fit, minmax(300px, 1fr)) 时会发生这种情况。出于某种原因,即使只有两个子 div,父 div 认为还有另一个元素并生成大量空白和不必要的网格间隙。知道如何合法地解决这个问题而不进行糟糕的修复吗?
这里是错误的重现: 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 */
}
在此上下文中使用 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;
}
}