CSS网格自动适应+ minmax增加幻像行 [英] CSS Grid auto-fit + minmax adds phantom row

问题描述

在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; 
} 
} 
  

修改后的codepen

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;
  }
}

revised codepen

这篇关于CSS网格自动适应+ minmax增加幻像行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！