CSS Grid：fr单位与grid gap结合时的意外布局行为问询

这个问题的核心在于你对CSS Grid中fr单位和grid-gap（现在标准写法是gap）的作用范围理解有偏差，我们一步步拆解来理清逻辑：

问题根源：grid-gap是容器的行间距，不属于行高度的一部分 #

当你设置grid-row-gap: 1rem时，这个间距是网格容器中两行之间的额外独立空间——它不会被包含在任何一行的高度里，也不会被跨多行的网格项“覆盖”或“吸收”。

结合你的代码来看：

• 网格容器是inline-grid，高度完全由内部内容自动撑开
• 左元素.left固定高度120px，设置grid-row: 1/span 2（跨两行显示）
• 网格行定义为grid-template-rows: auto 1fr：第一行高度由右上元素（20px）决定，第二行用1fr填充剩余空间

浏览器的计算逻辑是这样的：

1. 第一行高度确定为20px（由.right-top的固定高度决定）
2. 因为.left跨两行且固定高度120px，所以两行的高度总和必须等于120px → 第二行高度 = 120px - 20px = 100px（这里1fr被计算为100px）
3. 网格容器的总高度 = 第一行高度 + grid-row-gap + 第二行高度 = 20px + 1rem + 100px = 120px + 1rem

这就导致了视觉上的问题：.left的高度是120px，但容器高度是120px+1rem，所以.left下方自然会多出1rem的空隙——这个空隙就是grid-row-gap带来的额外容器高度。

为什么fr没有抵消gap的影响？ #

fr单位的作用是分配网格容器中的“可用空间”，但这个可用空间的计算有个前提：

• 如果容器有明确的固定高度（比如height: 300px），可用空间 = 容器高度 - 所有固定/auto行的高度 - 所有gap的总和，此时fr会基于这个值分配空间
• 但如果容器是inline-grid或未设置固定高度（高度由内容撑开），fr会优先满足网格项的尺寸需求，再填充剩余空间，但gap始终是额外的容器空间，不会被fr的计算逻辑包含进去。

在你的场景中，fr只是计算出第二行需要100px才能让.left的两行高度总和为120px，但grid-row-gap是额外加在容器高度里的，所以fr无法抵消这个gap的影响。

你的margin解决方案为什么有效？ #

当你用margin替代grid-row-gap时，本质是把间距从“容器的行间距”变成了“元素的外边距”：

• 去掉grid-row-gap后，网格容器的总高度 = 第一行高度 + 第二行高度 = 20px + 100px = 120px（和.left的高度完全一致）
• 给.right-bottom加margin-top: 1rem，这个间距是元素之间的外边距，不会增加容器的总高度，只会让右侧两个元素之间产生1rem的空隙，同时.left和容器底部完美对齐，没有多余空隙。

补充：如果想保留grid-gap，怎么解决？ #

如果你不想用margin，也可以给网格容器设置固定高度，让fr的计算包含gap：

.grid {
  /* 其他属性不变 */
  height: 120px; /* 和.left的高度保持一致 */
}

此时容器高度固定为120px，可用空间 = 120px - 20px - 1rem，fr会分配这个剩余空间，容器总高度刚好是120px，.left下方就不会有空隙了。

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