动态生成的JS+Flexbox矩形网格在Firefox桌面特定尺寸下显示异常

我写了个动态生成固定宽高比矩形网格的函数，在Chromium系浏览器和移动端DuckDuckGo里都正常，但桌面版Firefox 108.0有问题——当网格元素数是7、11、17、19、26、28这类值时，最后一行的单个元素会被拉成横跨整个容器的宽矩形，没法和其他元素保持同尺寸。之前试过给容器或子元素加min-height: 0;、min-height: auto;还有min-width相关属性，都没解决。

修复方案 #

这个问题是Firefox和Chromium在处理CSS Grid自动行列计算时，对宽高比约束的解析逻辑不一致导致的。可以通过以下调整统一跨浏览器表现：

• 给网格容器添加grid-auto-flow: dense，强制浏览器按网格轨道规则填充元素，避免单个元素被错误拉伸
• 用grid-template-columns: repeat(auto-fill, minmax([最小列宽], 1fr))明确列的最小宽度，让列数计算有统一基准
• 确保网格项的宽高比通过aspect-ratio属性（或padding-top百分比技巧）严格生效

示例代码调整 #

.grid-container {
  display: grid;
  /* 替换150px为你需要的最小列宽 */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-flow: dense;
  gap: 10px; /* 可选，根据需求调整间隙 */
}

.grid-item {
  aspect-ratio: 16/9; /* 替换为你的目标宽高比 */
  background-color: #e0e0e0;
}

这样调整后，Firefox会和其他浏览器一样，按照统一的规则计算网格布局，特定元素数量下的底部行异常就能解决，所有矩形都能保持一致尺寸。

内容的提问来源于stack exchange，提问作者Adrian