CSS Grid布局在Chrome、Safari上尺寸翻倍，Firefox显示正常的适配求助

核心问题定位 #

Chrome、Safari 表现完全一致的显示异常，仅 Firefox 渲染正常，是典型的 Blink/WebKit 与 Gecko 内核在CSS Grid计算逻辑上的实现差异问题，匹配你遇到的“Grid容器莫名尺寸翻倍、内部内容未同步增长、呈现居中错位”的表现，可按以下优先级直接排查修复，不用反复调整Grid轨道比例浪费时间：

• 未重置Grid元素的默认最小尺寸
  WebKit/Blink 内核默认把Grid容器及其直接子项的min-width/min-height绑定为内容的固有尺寸，当Grid轨道使用1fr单位时，就会踩中浏览器的经典计算bug：把内容固有尺寸和1fr轨道的计算宽度叠加，直接撑出翻倍的容器尺寸。而Firefox会自动把Grid轨道的最小计算值重置为0，所以完全不会出现这个问题。
  对应修复代码：

  .grid-container, .grid-container > * {
    min-width: 0;
    min-height: 0;
  }
  

• 仅给图片加width:100%没加尺寸上限
  之前调整img元素的width:100%没效果，核心原因是漏了max-width:100%的约束。当Grid容器内的媒体元素、长串无换行文本、内嵌块没设置尺寸上限时，WebKit内核会把这类元素的固有宽度当成Grid轨道的最小计算值，最终把容器宽度撑到“内容固有宽度+滚动偏移量”的翻倍效果。光加width:100%没用的原因很简单：当元素固有宽度比容器宽时，width:100%的设置会被固有尺寸的约束覆盖，必须加max-width才能真正锁死尺寸上限。
  对应修复代码：

  .grid-container img,
  .grid-container video,
  .grid-container iframe,
  .grid-container p {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  

• 滥用全局place-items: center触发居中计算偏移
  很多人为了快速实现内容居中，直接在Grid容器上写全局的place-items: center，但没给直接子项加尺寸约束。这种场景下WebKit内核会把内容的固有宽度当成居中定位的基准值，双向分摊可用空间，最终容器宽度被撑为“固有内容宽度+两侧居中预留空间”，刚好匹配“内容在正中间、容器莫名宽一倍”的视觉错位效果。
  对应修复操作：不要在Grid容器上全局开居中对齐，仅给需要居中的单个子项配置align-self: center; justify-self: center；如果确实需要全局居中，务必给所有子项补充max-width:100%约束。

快速定位技巧 #

打开Chrome开发者工具选中异常Grid容器，在计算样式面板看宽度的数值构成，找到被额外撑开的子元素，对照上述规则逐一匹配即可。CodePen的预览环境不会引入额外样式冲突，这类异常基本都是内核兼容问题，不用花时间排查CodePen环境的干扰。

不要一开始就乱改Grid轨道的fr比例、重复设置容器宽度，这类操作只会把错位的位置换个地方，不会从根上解决尺寸计算的偏差问题。

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