直接写 grid-template-columns: 200px 1fr 200px 可实现左右固定、中间自适应，但需父容器有明确宽度上下文，否则1fr因无剩余空间而失效；常见原因包括父容器无宽、处于flex子项、未设display: grid、内容溢出等。
直接写 grid-template-columns: 200px 1fr 200px 就能实现左右固定、中间自适应，但前提是父容器有明确宽度上下文，且没被上层 flex 或绝对定位意外截断。
为什么中间栏没撑开？常见失效场景
不是 1fr 不工作，而是它没“剩余空间”可分：
- 父容器没设
width或处于无约束的body直接子级中，1fr分不到像素 - 容器本身是某个
display: flex子项，flex-basis把宽度卡死了，Grid 容器实际宽度不足 - 忘了加
display: grid，只写了grid-template-columns，CSS 忽略该声明 - 子项里有未设
min-width: 0的图片或长单词，触发内容撑破轨道，间接导致1fr行为异常
auto 和 1fr 在中间列选哪个？
二者行为完全不同，混用会出意料之外的结果：
-
auto：基于内容最小宽度，内容为空时列宽趋近于 0；适合图标栏、纯按钮侧边栏 -
1fr：强制占据扣除显式尺寸后的剩余空间，哪怕中间是空<div></div>也会占满；适合主内容区需要视觉“撑开”的场景 - 想让左栏最小 200px、但允许略撑开（比如标题变长），用
minmax(200px, max-content)，但得配overflow: hidden防溢出
移动端千万别直接复用桌面写法
200px 1fr 200px 在手机上几乎必然失败——左右各 200px 已超多数屏幕宽度，中间列无空间可分，可能触发横向滚动或内容换行错乱。
- 必须用媒体查询降级：
@media (max-width: 768px) { grid-template-columns: 1fr; } - 别依赖
auto-fit或minmax()自动适配，小屏逻辑必须显式声明为单列 - 如果真要保留侧边栏（如导航），应在小屏下用
display: none隐藏，而不是让它强行存在 - Safari iOS 15.4 以下不支持
gap，得补grid-column-gap: 16px回退
容易被忽略的渲染细节
写了 1fr 不代表万事大吉，几个真实项目里卡住过的点：
- 父容器若用了
box-sizing: border-box但子项没统一设，padding/border 可能导致列宽计算偏差 - 子项内有
<table> 或未设 <code>white-space: nowrap的长 URL，Grid 可能生成隐式行，加grid-auto-flow: column更稳 -
1fr对空内容也生效，但如果你希望空内容栏完全不可见，得配合display: none，不能只靠宽度控制 - IE 完全不支持
fr，@supports not (display: grid)fallback 得单独写，别指望自动兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
