混用 fr 和 px 会导致列宽计算冲突：固定单位优先占位，fr 仅分配剩余空间；应改用 minmax() 实现最小固定+弹性延展，如 minmax(240px, 300px) 或 clamp(240px, 25%, 300px)。
grid-template-columns 里用 fr 和 px 混搭会怎样
直接混用会导致列宽计算逻辑冲突：固定单位（如 200px）严格占位，fr 单位只分配剩余空间。浏览器不会“拉伸”固定列去填满容器，也不会把 fr 当成像素值参与初始布局。
常见错误是写成 grid-template-columns: 200px 1fr 200px 却期望中间列能随内容撑开——其实它只拿剩余宽度，和内容无关；若容器太窄，固定列可能溢出，fr 列甚至缩到 0。
- 固定列优先级高于
fr，先扣掉所有固定值再分剩余 -
minmax(200px, 1fr)是更安全的替代方案，兼顾最小宽度与弹性 - 避免在同一个
grid-template-columns中混用fr和%，百分比依赖父容器宽度，而fr依赖网格可用空间，二者基准不同
用 minmax() 实现「最小固定 + 最大弹性」列
这是控制固定宽度列又不牺牲响应性的主流做法。比如侧边栏需要至少 240px，但屏幕很宽时也不该无限撑开，就用 minmax(240px, 300px)；若希望它能弹性延展上限，就写 minmax(240px, 1fr)。
注意：minmax(min, max) 的 max 部分不能是纯 fr（如 minmax(200px, 1fr)），否则整个轨道会被当成无限弹性，失去“最小约束”意义——实际生效的是 minmax(200px, max-content) 行为，容易撑破容器。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
minmax(240px, 300px)或minmax(240px, calc(100vw - 480px)) - 如果真要结合
fr，改用clamp()：例如clamp(240px, 25%, 300px)，更可控 - 配合
grid-auto-flow: column时，minmax()对隐式列也生效，需额外用grid-auto-columns控制
固定列被内容撑开？检查 min-width 和 overflow
即使设了 200px 列宽，长单词、未换行文本或内联块元素仍会让列变宽——CSS Grid 默认不截断内容，而是按内容尺寸扩张轨道。
这不是 Grid 的 bug，而是规范行为：轨道尺寸是“建议值”，内容有更高优先级（除非显式限制）。
- 给网格项加
min-width: 0（尤其含 flex/grid 子元素时） - 对文本内容加
overflow-wrap: break-word或word-break: break-all - 避免在固定列内放
display: inline-block且未设width的元素 - 用
grid-column: span 1显式限定跨列数，防止隐式扩展
响应式中固定列失效？别只靠 @media 重写 grid-template-columns
单纯在媒体查询里切换 grid-template-columns 值（比如从 200px 1fr 改成 1fr）看似合理，但存在两个隐患：一是列数变化导致子元素位置跳变，二是没处理原有固定列里的内容适配。
更好的方式是用 subgrid（仅支持现代浏览器）或提前规划“可折叠”语义结构，而不是靠宽度硬切。
- 用
grid-template-areas配合@media更易维护布局意图 - 固定列内嵌套一个
max-width: 100%的容器，再设overflow-x: auto应对窄屏 - 对关键固定列加
fit-content(200px)，比纯200px更适应内容波动
固定列不是“钉死不动”，而是“有底线的弹性”。真正难的不是写对 200px，而是想清楚：这个 200px 是设计约束，还是内容边界，还是性能临界点——三者对应的 CSS 写法完全不同。
