用 fr 单位是解决 CSS Grid 列宽不均匀最直接有效的方式，它按比例分配可用空间，不依赖内容长度或固定像素值；常见原因包括混合单位、内容撑开、box-sizing 未设为 border-box 或 Flexbox 中误用 flex-basis。
用 fr 单位是解决 CSS Grid 列宽不均匀最直接有效的方式，它按比例分配可用空间，不依赖内容长度或固定像素值。
为什么列宽会不均匀？
常见原因包括：混合使用 px、%、auto 等不同单位；子元素内容撑开列宽（如长文本、图片未限制）；未设置 box-sizing: border-box 导致 padding/border 影响实际宽度；或在 Flexbox 中误用 flex-basis 未归一化。
用 fr 实现真正等比例列宽
fr（fraction）代表剩余空间的等分份额，只作用于 Grid 容器的 grid-template-columns 或 grid-template-rows。只要所有列都用相同数值的 fr，就能严格等宽。
- 三等分列：
grid-template-columns: 1fr 1fr 1fr; - 四等分但留一列固定 80px（如操作栏）：
grid-template-columns: 1fr 1fr 1fr 80px; - 两列 2:1 比例：
grid-template-columns: 2fr 1fr;
注意：fr 不参与初始渲染计算，它是在扣除所有固定尺寸（如 px、em、minmax(200px, 1fr) 中的最小值）后，再对剩余空间做分配。
立即学习“前端免费学习笔记（深入）”；
配合 minmax 防止过窄或溢出
纯 1fr 在小屏幕下可能让列过窄，文字换行混乱；大内容又可能撑破容器。推荐组合 minmax()：
-
grid-template-columns: repeat(3, minmax(200px, 1fr)));—— 每列至少 200px，超出部分等比拉伸 -
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));—— 响应式自适应列数，浏览器自动计算能放几列
此时即使内容长度差异大，列宽仍保持视觉一致，不会因某列文字多就变宽。
避坑提醒：fr 不适用于 Flexbox
fr 是 Grid 专属单位，在 Flexbox 的 flex 属性中无效。Flexbox 要实现类似效果，需用 flex: 1（等价于 flex: 1 1 0），并确保父容器设 display: flex 且子项无固定宽度干扰。
- 错误写法：
flex: 1fr;（语法错误） - 正确写法：
flex: 1;+ 所有子项统一设置，且移除width、min-width等抢占空间的样式
如果项目已用 Flexbox 且列宽不均，优先检查是否混用了 width 和 flex，或子项内联元素未设 white-space: nowrap / overflow: hidden 控制溢出。
