1fr失效主因是父容器缺可分配空间或内容未约束。需确保父容器有明确宽度、子项设min-width:0/max-width:100%/overflow:hidden，且避免混用fr与auto；移动端须配合媒体查询或minmax()实现响应式。
直接用 grid-template-columns: 250px 1fr 250px 就能实现左右固定、中间自适应的三栏，但前提是容器有明确宽度上下文，且内容不撑爆列宽。
为什么写对了 1fr 还是没效果？
常见失效不是语法错，而是父容器没“可分配空间”：
- 父元素未设
width或max-width，又处于无约束流中（比如直接子元素挂body），1fr就没剩余空间可分 - 某栏内容（如长单词、图片、嵌套
flex容器）没加min-width: 0或overflow: hidden，浏览器优先满足内容最小宽度，1fr被挤压退让 - 误在子项上写
width、flex等属性，干扰 Grid 的列轨道计算
1fr 和 auto 在三栏里怎么选？
二者行为完全不同，混用会出意料结果：
-
auto：按内容最小宽度伸缩，适合图标栏、短文本侧边栏；但若内容为空或极短，该列可能塌缩成几像素 -
1fr：强制占满扣除显式尺寸后的剩余空间，哪怕中间内容为空也撑开，更适合视觉上“等高+填满”的主区域 - 混合写法更实用，比如
250px 1fr max-content—— 左固定、中弹性、右随内容（如用户头像）
移动端适配不能只靠 fr
fr 本身不响应屏幕尺寸变化，必须配合媒体查询或 minmax()：
- 简单堆叠：用
@media (max-width: 768px) { grid-template-columns: 1fr; } - 智能换行：改用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));，小屏自动变单列，平板两列，桌面三列 - 旧版 Safari（iOS 15.4 以下）不支持
gap，得加回退：grid-column-gap: 16px; grid-row-gap: 16px;
真正容易被忽略的是内容层约束——1fr 不是万能胶，它只管空间分配，不管内容是否溢出。一张没设 max-width: 100% 的图、一个没断行的长 URL，都可能让整行布局崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
