grid-template-columns 混用 fr 和 px 完全合法，如 200px 1fr 300px 2fr；固定单位列先扣除，fr 按剩余空间比例分配，最小宽默认为 0，需用 minmax 或 overflow 控制溢出。
grid-template-columns 里混用 fr 和 px 是完全合法的
直接写 grid-template-columns: 200px 1fr 300px 2fr; 就行，浏览器会把带单位的（如 px、em、%）当作固定尺寸，把 fr 当作剩余空间按比例分配。不需要额外 wrapper 或 js 计算。
固定列宽列不会被 fr 拉伸，但会影响剩余空间计算
比如 grid-template-columns: 100px 1fr 200px 1fr;：两列 fr 共享的是「总宽度减去 300px 后的剩余空间」，不是整个容器宽度。如果容器只有 400px，那两个 1fr 各得 50px；如果容器是 1000px，它们各得 350px。
-
fr列最小宽度默认为0，可能被压缩到看不见——加minmax(0, 1fr)也没用，得显式设min-width - 固定列若内容超宽（比如长 URL），默认会撑开整列——加
overflow: hidden; text-overflow: ellipsis;或white-space: nowrap;控制 - 别用
auto和fr混搭，auto行为依赖内容，容易和fr分配逻辑冲突
响应式场景下 px 列可能破坏布局，建议用 minmax() 包一层
纯 px 在小屏上会溢出。想让固定列“尽量固定、但可收缩”，就用 minmax(150px, 250px) 替代 250px；想让它“最小 150px，其余全给 fr”，就写 minmax(150px, 1fr) ——注意后者中 1fr 是上限，不是比例分配值。
-
minmax(200px, 1fr)：该列至少 200px，最多不超过它在1fr分配中应得的宽度 -
minmax(min-content, 1fr)可让列宽随内容自适应，同时不抢fr的份额 - 慎用
fit-content(200px)，它行为类似minmax(min-content, 200px)，但兼容性略差（safari 14.1+ 支持）
调试时重点看 computed width 和 grid track sizing
chrome DevTools 的 Layout 面板里展开「Grid」，能看到每条轨道（track）的计算宽度，包括 fixed 列是否被截断、fr 列是否为 0。常见误判点：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
width或max-width，导致 grid 容器本身无限宽，fr 列也无限大 - 某列设置了
width: 100%或flex: 1，干扰 grid 自身布局逻辑 - 用了
grid-auto-columns却忘了它只影响隐式网格，对grid-template-columns无影响
实际混合使用时，最易忽略的是固定列内容溢出对整体布局的连锁挤压，以及小屏下 px 值硬编码带来的不可缩放性。fr 不是魔法，它只是剩余空间的切分器——先扣掉所有确定尺寸，再分剩下的。