为何CSS Grid的gap属性会影响fr单位的布局效果？

原因解释 #

这是因为fr单位的计算逻辑是基于网格容器的可用空间——即容器总尺寸减去gap、内边距等占用空间后的剩余部分，而你的布局里，区块e跨了3行（对应a、b、c的三行），区块f单独占第4行。

无gap时，3行1fr的总高度 + 1行3fr的高度 = 容器总高度，此时3*1fr刚好等于3fr，所以e和f高度完全一致。

但添加gap:10px后，行与行之间会产生垂直间隙：

• e跨的三行之间有2个垂直gap（10px×2），这些gap会被算进e的总高度里
• f所在的第4行是单行，没有内部的行间隙

而fr只负责分配网格轨道的高度，不包含gap。具体来说：
容器剩余高度（总高度减去3个垂直gap的总和）会按1fr+1fr+1fr+3fr的比例分配，3个1fr轨道的总高度和1个3fr轨道的高度是相等的，但e的总高度还要加上它内部的2个gap，所以最终e的高度会比f多出20px，导致两者高度不一致。

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