CSS grid-template-columns中小于1和大于1的fr单位有什么差异？

核心疑问解答 #

1. grid-template-columns中是不是只有fr的比例会影响布局？ #

不是。fr的布局效果除了比例之外，还受两个规则的直接影响：

• 所有fr值的总和是否大于等于1
• fr轨道的默认最小尺寸约束：默认fr轨道等价于minmax(auto, 对应fr值)，也就是轨道宽度不能小于其内部内容的最小宽度，也不能小于内部元素设置的固定宽度

2. 同比例的小于1的fr和大于1的fr渲染效果为什么不一样？ #

你给出的两组配置0.3fr 0.4fr 0.3fr和3fr 4fr 3fr比例确实都是3:4:3，效果差异来自fr总和不同触发的分配规则差异，结合你提供的代码具体分析：

fr总和为10>1的.gidoo配置

.gidoo {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  margin: 5em;
  grid-gap: 1em;
  width: 400px;
}
.gidoo div {
    border: 1px solid blue;
}
.gidoo div:first-child {
    width: 100px;  
}

当fr总和≥1时，容器扣去gap后的所有剩余空间都会按fr比例分配，按默认1em=16px计算，第一列的宽度约为(400px - 2*16px) * 3/10 = 110.4px，大于内部子元素设置的100px宽度，不会触发最小宽度约束，三列最终严格按3:4:3比例分配空间。 #

fr总和为1的.gizim配置

.gizim {
  display: grid;
  grid-template-columns: 0.3fr 0.4fr 0.3fr;
  margin: 5em;
  grid-gap: 1em;
  width: 400px;
}
.gizim div {
    border: 1px solid red;
}
.gizim div:first-child {
    width: 100px;  
}

当fr总和=1时，fr的分配逻辑为：每个轨道的弹性宽度为当前fr值 * 剩余空间，第一列的弹性宽度计算下来约为110.4px，这时候如果第一列内部元素设置的固定宽度超过了弹性宽度，触发最小宽度约束后，剩下的剩余空间只会按剩下的fr比例（0.4+0.3=0.7）分配70%，而非全部分配，最终的列宽比例自然和总和大于1的情况有差异。 #

规范补充 #

W3C网格布局规范中对（即fr单位）的分配规则明确：

• fr总和≥1：全部剩余空间按比例分配，每个轨道占比为单轨道fr值 / 总fr值
• fr总和<1：仅分配总fr值 * 剩余空间的大小，剩余部分留空不分配
• 所有fr轨道默认最小宽度为auto，只要内容最小宽度大于fr计算出来的宽度，就会优先满足内容宽度，打破原有的fr比例

内容的提问来源于stack exchange，提问作者Nir O.