fr是剩余可用空间的份数，按权重分配未被固定值占用的空间；需配合minmax()、内容换行控制及容器约束才能稳定生效。
fr单位在CSS Grid中到底怎么分配空间
fr不是像素、百分比或固定值，它代表“剩余可用空间的份数”。当容器设为display: grid后，grid-template-columns: 1fr 2fr的意思是：把所有**未被显式占用的空间**按1:2切分，而不是按总宽比例切分。如果某列有minmax(200px, 1fr)，那200px以下宽度会被强制撑开，fr只在超出部分生效。
- 多个
fr相加不等于100%，而是按权重瓜分“剩余空间”——比如1fr 1fr 2fr，三列实际占比取决于内容是否占满、是否有固定尺寸项 - 混用
fr和固定值（如200px 1fr）时，固定值先占位，剩下的才交给1fr -
fr对grid-template-rows同样有效，但行高受内容高度影响更大，容易出现意外溢出
响应式列宽必须配合媒体查询或minmax()吗
纯fr本身不响应，它只是动态分配剩余空间。真正实现“小屏单列、大屏三列”，得靠grid-template-columns随视口变化而切换。最稳妥的是用minmax() + auto-fit组合，避免写死断点：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
这行代码的意思是：每列最小300px，最大尽可能宽（1fr），自动填满容器，列数由容器宽度决定。比手写@media (max-width: 768px) { ... }更灵活，且无需预设断点数量。
- 用
auto-fill会保留空轨道；auto-fit会收缩空轨道，让现有列拉伸占满 - 如果内容本身有固定宽度（如图片
width: 100%），记得加max-width: 100%防溢出 - 某些旧版Safari对
auto-fit支持不稳定，需加-webkit-前缀或降级为媒体查询
为什么设置了1fr却没等宽，甚至列宽忽大忽小
常见原因是内容挤压或隐式网格线干扰。Grid默认按内容最小宽度（min-content）给列设下限，哪怕你写了1fr，如果某列里有个长单词或未换行的URL，整列就会被撑开，其他列被迫压缩。
立即学习“前端免费学习笔记（深入）”；
- 给网格项加
overflow-wrap: break-word或word-break: break-word，防止文本撑破列宽 - 检查是否误用了
grid-column: span 2之类声明，导致某项跨多列，破坏fr均分逻辑 - 父容器若没设
width或max-width，在弹性布局中可能取父级宽度，造成列宽浮动 - Chrome开发者工具里看Computed面板，确认
grid-template-columns最终解析值是否如预期
移动端竖排列表想用fr但又怕太窄怎么办
直接写1fr在手机上确实容易窄得只剩20px。关键不是禁用fr，而是控制它的“最小底线”。用minmax()兜底最直接：
grid-template-columns: minmax(280px, 1fr))
这样既保住了移动端最小可读宽度，又允许在大屏下自由扩展。如果要更精细控制，可以嵌套clamp()：
grid-template-columns: clamp(280px, 100vw - 4rem, 1fr)
但注意clamp()在IE和部分旧Android浏览器里无效，生产环境优先选minmax()。
- 别用
px硬写最小宽度，比如minmax(320px, 1fr)——320px在iPhone SE上刚好，但在折叠屏或横屏平板就显得局促 - 如果列内有按钮或输入框，它们的
min-width可能高于fr分配结果，此时需统一设min-width: 0释放约束 - flex布局有时比grid更适合纯单列响应式，别为了用fr而强行套grid
fr单位本身很干净，但真正让它稳稳干活的，是跟minmax()、内容约束、容器边界一起配合。单独扔个1fr 1fr进去，就像只给车轮不给方向盘——轮子转得再顺，方向错了照样撞墙。
