fr与px混用时，浏览器先扣除固定宽度（如200px），再将剩余空间按fr比例分配；fr列收缩下限为内容最小宽度，需设min-width:0防溢出。
grid-template-columns 里混用 fr 和 px 的实际效果
fr 单位是比例分配剩余空间，px 是固定宽度，两者混用时，浏览器先扣除所有固定宽度（如 120px、minmax(200px, 1fr) 中的最小值），再把剩下的可用空间按 fr 比例分给其他列。
常见错误是以为 1fr 200px 1fr 会让两边列“各占一半”，其实中间列占满 200px 后，左右才平分剩余空间——如果容器只有 200px 宽，那左右列会坍缩到 0（除非设了 min-width）。
-
grid-template-columns: 1fr 200px 1fr→ 中间固定，左右弹性 -
grid-template-columns: 1fr 200px 2fr→ 左右按 1:2 分剩余空间，中间仍固定 - 想让某列“至少 200px，最多占满剩余空间”？用
minmax(200px, 1fr)，不是200px 1fr
fr 单位在不同容器宽度下的行为差异
fr 不是百分比，它只对“减去固定尺寸后的剩余空间”生效。当容器变窄，fr 列可能被压缩到内容最小宽度（比如文字撑开的最小宽度），除非显式限制 min-width: 0 或 overflow: hidden。
例如：grid-template-columns: 1fr 150px，容器宽 300px → 第一列得 150px；容器宽 200px → 第一列只剩 50px，若里面是长单词，就会溢出或换行。
立即学习“前端免费学习笔记（深入）”；
- 防溢出：给 fr 列加
min-width: 0，允许其收缩到 0 - 保内容可读：搭配
word-break: break-word或overflow: hidden+text-overflow: ellipsis - 避免意外拉伸：不要在
fr列里放未约束的图片或 flex 容器，它们可能撑大列宽
如何让某一列优先保持固定宽度，其余自动均分
用 grid-template-columns 直接写死固定列，其余用多个 1fr 即可。但要注意：多个 1fr 并不等于“等宽”，而是“等比例”，所以 1fr 1fr 1fr 和 2fr 2fr 2fr 效果一样。
真正需要“均分剩余空间”的场景，比如三栏布局中侧边栏固定、主内容区均分剩余空间：
grid-template-columns: 80px 1fr 1fr;
但如果主内容区要“尽可能宽松”，而另一栏是操作区（如按钮列），更适合：
grid-template-columns: 1fr minmax(120px, max-content) 1fr;
-
minmax(120px, max-content)表示该列至少 120px，最多由内容决定宽度（不会被 fr 压缩） - 想让它“随内容变宽但不超过 200px”？换成
minmax(120px, 200px) - 避免用
auto和fr混搭，auto行为依赖内容，容易导致响应断裂
响应式中用媒体查询切换 fr/px 组合的注意事项
在小屏下把固定列改成弹性，或反过来，是常见需求。但直接在媒体查询里改 grid-template-columns 可能引发重排抖动，尤其列内有图片或字体加载延迟时。
更稳妥的做法是：提前定义好两套结构，用 display: none 配合 grid-area 控制可见性，或用 @container（需支持）做容器查询。
- 别在
@media里频繁切换1fr和200px，容易让内容跳动 - 固定列建议用
minmax()包裹，比如minmax(200px, 200px)，语义更清晰 - 测试时重点看边界宽度（如 768px、1024px），fr 列是否突然收缩到不可用程度
1fr，只要里面有个没设 max-width 的图片，整列就卡死不缩。 
