CSS Grid中fr单位与百分比的区别是什么？

1. 计算基数本质不同 #

• 百分比：直接基于**容器的总尺寸（content + padding，除非修改box-sizing）**计算，完全不考虑容器内的间隙（gap）、固定宽度元素等额外占用空间的内容。
• fr（分数单位）：基于容器的可用剩余空间计算——先从容器总尺寸中扣除所有固定尺寸项（如200px列）、gap、容器padding等占用的空间，再将剩下的部分按fr的比例分配。

2. 处理间隙（gap）的逻辑完全不同 #

这是两者最容易显现差异的核心场景：

• 用百分比时，gap是额外追加的空间，不会被百分比计算纳入。比如写grid-template-columns: 25% 25% 25% 25%并添加gap: 10px，4列总宽度是容器的100%，再加上3个gap的30px，总宽度会超过容器，必然出现横向滚动条。
• 用fr时，gap会被优先从容器空间中扣除，剩余的空间再按fr比例分配。同样是4个1fr加gap:10px，总宽度刚好填满容器，不会溢出。

在容器无padding、无gap、无其他固定尺寸元素的极简场景下，两段代码的视觉效果确实一致，但只要添加任何额外样式，差异立刻显现：

场景1：添加gap和padding #

/* fr版本：无溢出，布局自适应 */
.grid-fr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 20px;
}

/* 百分比版本：出现横向滚动条 */
.grid-percent {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  gap: 10px;
  padding: 20px;
}

场景2：混合固定尺寸列 #

/* fr版本：剩余空间自动平均分配 */
.grid-fr {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}

/* 百分比版本：40%基于容器总宽度，大概率超出容器 */
.grid-percent {
  display: grid;
  grid-template-columns: 200px 40% 40%;
}

这里200px + 40% + 40%几乎一定会超过容器总宽度，导致溢出；而fr版本会自动把容器总宽度减去200px后的剩余空间，平均分给两个1fr列。

• fr是为Grid布局量身设计的自适应剩余空间分配单位，能自动处理间隙、padding和固定元素的空间占用，适合灵活的响应式布局；
• 百分比是通用的比例单位，不考虑Grid布局内的额外空间消耗，仅适合简单的无间隙、无额外内边距的布局场景；
• 你给出的两段代码在极简场景下视觉一致，但实际项目中几乎都会遇到gap、padding或混合尺寸的情况，此时fr的优势会完全体现。

内容的提问来源于stack exchange，提问作者debh-2024