问题描述
在Chrome的CSS网格中似乎有一个奇怪的错误(在Firefox中不会发生)。它发生在对网格模板列风格使用重复(自适应,minmax(300px,1fr))时。由于某些原因,即使只有两个子div,父div认为存在另一个元素,并产生大量的空白和不必要的网格空白。任何想法如何合理地解决这个问题,而不做一个janky修复?这是一个错误的重新创建:
在这种情况下使用 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;
}
}
There seems to be a strange bug in CSS grid for Chrome (doesn't happen in Firefox). It happens when using repeat(auto-fit, minmax(300px, 1fr)) for the grid-template-columns style. For some reason even though there are only two child divs, the parent div thinks there is a another element and generates a huge amount of whitespace and unnecessary grid gaps. Any idea how to legitimately fix this without making a janky fix?
Here's a recreation of the bug: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 */
}
There does appear to be a rendering difference between Chrome and Firefox / Edge when using auto-fill
in this context. Here is a possible workaround:
Use a more definite column size and a media query.
.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;
}
}
这篇关于CSS网格自动适应+ minmax增加幻像行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!