fr单位按“剩余可用空间减去所有固定尺寸及内容最小宽度后，再按比例分配”计算；例如200px 1fr 2fr中，先扣200px，再将余下空间按1:2分给后两列。
grid-template-columns 里 px 和 fr 混用时，fr 单位到底按什么算
fr 不是“剩余空间均分”，而是“剩余可用空间减去所有固定尺寸后，再按比例分配”。比如 grid-template-columns: 200px 1fr 2fr，浏览器先预留 200px 给第一列，再把容器宽度减去 200px 后的剩余部分，按 1:2 切成两份——第二列得 1/3 剩余宽，第三列得 2/3 剩余宽。
常见错误现象：1fr 列看起来比预期窄，甚至被压缩到内容最小宽度；其实是其他列（尤其是带 minmax() 或内容撑开的列）占用了更多空间，导致 fr 可分的“剩余”变少了。
- 固定值（
px、em、rem）优先级最高，直接占用对应空间 -
fr是弹性分配，但只作用于减去所有固定尺寸 + 内容最小尺寸（min-content）后的空间 - 如果某列内容很长且没设
min-width或overflow，它可能撑大整行，间接挤压fr列
为什么设置了 200px 1fr，第二列还是没占满剩余宽度
大概率是容器或父元素没给明确宽度，或者存在隐式 min-width 行为。Grid 轨道计算依赖容器的可用宽度；如果容器本身宽度不确定（比如在未设宽的 div 里），1fr 就会退化为内容宽度。
使用场景：侧边栏固定宽 + 主内容区自适应，但主区文字溢出或图片撑开时失效。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否设置了
width或max-width，尤其注意body或main是否有 margin/padding 影响计算 - 给
fr列加min-width: 0（防止内容溢出强制拉伸） - 避免在
fr列子元素上设white-space: nowrap或大图无约束宽，它们会让该列最小宽度变大
minmax(200px, 1fr) 和 200px 1fr 的行为差异
完全不是一回事。minmax(200px, 1fr) 是单个轨道定义：该列至少 200px，最多可吃到 1 份 fr 空间；而 200px 1fr 是两个独立轨道，第二列纯弹性，无最小限制。
性能影响：含 minmax() 的轨道在 resize 时需重新计算，但现代浏览器优化较好；真正拖慢的是嵌套 grid 或大量 fit-content()。
-
minmax(200px, 1fr)在容器很窄时仍保持200px，可能触发横向滚动 -
200px 1fr中的1fr列在容器窄于200px时会收缩到内容最小宽（可能崩坏布局） - 想让 fr 列有底线？用
minmax(min-content, 1fr)或显式min-width
移动端适配时，px 列在小屏上太宽怎么办
硬写 px 就是反模式。别指望靠媒体查询一个个改 grid-template-columns，容易漏、难维护。
推荐做法：用 clamp() 替代纯 px，或换用相对单位。
- 把
200px换成clamp(120px, 15vw, 200px)，既保下限又随屏缩放 - 用
em或rem配合根字体大小响应式调节，比 px 更可控 - 真要保留像素感？考虑
grid-template-columns: fit-content(200px) 1fr，让固定列只占内容所需空间
容易被忽略的一点：fr 轨道在 flex/grid 嵌套中可能被外层约束截断，此时看 computed styles 里的 “used width” 比看代码更准。
