Grid列宽异常多因父容器宽度不足，需检查computed width、outline边界及display/float导致的收缩，fr按剩余空间分配，勿混用px/%。
中间列用 1fr 但实际太窄？先检查父容器是否被压缩
Grid 列宽表现异常，80% 情况不是 fr 算错了，而是父容器本身宽度不足或受外层限制。比如：grid 容器套在 max-width: 600px 的 div 里，三列 1fr 2fr 1fr 总和再大也撑不开。
实操建议：
- 用浏览器开发者工具选中 grid 容器，看 computed width 是否符合预期（比如是不是被
fit-content或inline行为拉窄了） - 临时加
outline: 2px solid red看真实渲染边界 - 确认父级没设
display: inline-block或float导致收缩
fr 不是固定像素，它按剩余空间分配——别和 px/% 混用
写成 grid-template-columns: 200px 1fr 200px 看似合理，但一旦内容区域总宽 1fr 就会趋近于 0 —— 因为 fr 只分「减去已确定尺寸后的剩余空间」。
常见错误场景：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏用
250px，主内容写1fr，但页面整体窄屏下主内容被压成一条线 - 混用
minmax(300px, 1fr)却忘了minmax()的第一个参数会「抢占」空间
更稳的写法（带最小保障）：
grid-template-columns: 250px minmax(320px, 1fr) 250px;
想让中间列「视觉上更宽」？直接调高它的 fr 数值比
fr 是比例单位，不是权重系数。1fr 2fr 1fr 和 2fr 4fr 2fr 效果完全一样；但 1fr 3fr 1fr 就会让中间列占满 60% 总宽（5 份中的 3 份）。
调整建议：
- 从
1fr 1fr 1fr改成1fr 2fr 1fr，中间列立刻翻倍（相对占比） - 如果左右是固定功能区（如导航、侧边栏），直接用
200px 3fr 150px，数值越大越“重” - 避免用小数如
0.8fr—— 浏览器支持虽好，但可读性差，也不利于后续维护
响应式下中间列又被压扁？@media 里重定义 grid-template-columns
单靠改 fr 比例解决不了所有场景。小屏时，三列布局本就不合理，强行保持 1fr 2fr 1fr 反而让中间列文字挤成一团。
该断则断：
- 手机端优先用
grid-template-columns: 1fr，让所有区域垂直堆叠 -
平板过渡：用
minmax(280px, 1fr) 1fr实现「主内容 + 右侧工具栏」双列 - 别依赖 JS 动态改 CSS Grid —— 媒体查询更轻量、更可靠
真正容易被忽略的点：fr 比例生效的前提，是 grid 容器有明确的可用内联尺寸（inline-size）。如果容器本身 width 为 auto 且无约束，fr 就只能在内容撑起的最小宽度上分配——这时候调再大的 fr 数也没用。
