Chrome浏览器中CSS网格未指定行高时出现神秘间隙问题

我之前在Chrome里碰到过一模一样的CSS网格间隙问题，结合你的代码来看，这个“神秘间隙”基本是Chrome处理隐式行高和百分比列宽精度时的小bug导致的，咱们一步步来排查解决：

一、先搞清楚问题根源 #

你的代码里有两个关键点可能触发异常：

• 非精确的百分比列宽：9.81183%的列宽乘以8列后总宽度是78.4946%，剩下的空间靠justify-content: space-around分配。Chrome在计算这种带多位小数的百分比时，会因为像素四舍五入产生微小的精度误差，进而错误触发隐式行高的计算（浏览器误以为有内容溢出，自动撑开了行高）。
• 隐式行高的自适应逻辑：当未指定grid-auto-rows时，Chrome的网格布局对“无内容子元素”的行高计算逻辑偶尔会出现偏差，尤其是在列宽存在精度误差的情况下。

二、具体的解决方法 #

1. 替换非精确百分比，用更可控的列宽方案 #

把模糊的百分比换成精确值，避免精度误差：

.parent {
  display: grid;
  width: 300px;
  /* 方案1：用1fr均分+gap控制间隙，完全避免百分比精度问题 */
  grid-template-columns: repeat(8, 1fr);
  gap: 4px; /* 可根据需求调整间隙大小 */
  
  /* 方案2：用精确的百分比（100%/8=12.5%），此时无需justify-content */
  /* grid-template-columns: repeat(8, 12.5%); */
}

2. 显式指定自动行高，强制覆盖浏览器的错误计算 #

直接给网格容器设置grid-auto-rows，明确行高的计算规则：

.parent {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(8, 9.81183%);
  justify-content: space-around;
  /* 用min-content让行高严格匹配子元素内容 */
  grid-auto-rows: min-content;
  /* 如果子元素是固定高度，也可以直接写具体值，比如grid-auto-rows: 40px; */
}

3. 重置子元素的默认样式 #

有时候浏览器默认的margin（比如段落、span的默认外边距）会悄悄撑开子元素高度，进而导致行高异常，给子元素重置默认样式：

.child {
  margin: 0;
  padding: 0;
  /* 若子元素无内容，可强制设置高度避免空元素触发异常 */
  /* height: 20px; */
}

4. 用Chrome DevTools定位问题 #

打开Chrome开发者工具，选中.parent元素，在Elements > Layout面板下勾选「Grid」，就能直观看到网格的列线、行线和实际布局范围，快速判断是列宽精度问题还是行高计算异常。

5. 升级Chrome到最新版本 #

这个间隙问题可能是特定旧版本Chrome的网格布局bug，升级到最新稳定版后大概率会自动修复。

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