Chrome与Firefox中网格区域高度不一致问题排查与修复

这个跨浏览器的Grid布局高度差异我之前也碰到过，核心是Firefox和Chrome对CSS Grid规范中grid-auto-rows: max-content的解析逻辑不一样：

• Chrome会优先尊重网格项（也就是你这里的#main）自身设置的height属性，直接把网格项所在行的高度固定为300px，符合你的预期。
• 但Firefox会把网格项跨越的每一个自动生成行的高度都按max-content计算——哪怕网格项本身设了固定高度，如果#main的grid-row属性跨了多行，Firefox就会把这些行的高度累加起来，最终导致总高度远大于300px。

你可以从下面几种方案里选最适合你场景的：

方案1：修改网格容器的grid-auto-rows属性 #

把grid-auto-rows: max-content改成grid-auto-rows: auto，这样网格行的高度会优先由网格项自身的高度决定，两个浏览器的表现就能统一了：

#wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 20px 120px 50px 20px 1fr;
  grid-auto-rows: auto; /* 替换原有的max-content */
  grid-gap: 0px;
  margin: 0 auto;
}

方案2：明确指定网格行的高度 #

如果#main需要固定在某一行，直接在grid-template-rows里定义该行的高度，代替依赖自动生成的行：

#wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 20px 120px 50px 20px 1fr;
  grid-template-rows: auto 300px; /* 假设#main在第二行，直接设置行高为300px */
  grid-gap: 0px;
  margin: 0 auto;
}

方案3：确保网格项只占一行 #

检查#main的grid-row属性，明确让它只跨越一行，这样Firefox就不会累加多行高度了：

#main {
  grid-column: 1 / 7;
  grid-row: span 1; /* 强制只占一行 */
  height: 300px;
  background-color: olive;
}

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