fr单位未等分因容器无明确尺寸；100vh溢出因未设box-sizing:border-box或存在外边距；auto-fit失效因子项未软换行或替换元素未限宽；calc()需单位统一且禁跨维度混用。
grid-template-columns 里用 fr 单位却没等分？
fr 不是“固定像素”，而是剩余空间的分配比例，前提是容器有明确尺寸或受父容器约束。如果 grid-container 没设宽高、又没被内容撑开，fr 就无空间可分，所有列可能塌成最小内容宽。
- 确保父容器有
width或max-width，或自身是弹性/绝对定位且尺寸明确 - 避免在
grid-template-columns: 1fr 1fr前加minmax(0, 1fr)以外的隐式约束（比如未重置的min-width: auto） - 调试时临时加
border: 1px solid red看容器是否真占满预期区域
grid-template-rows 设了 100vh 还是溢出滚动？
100vh 是视口高度，但浏览器地址栏、工具栏可能动态缩放它；更关键的是：如果网格容器内子项有 margin、padding 或 border，而你没用 box-sizing: border-box，总高度就超出了 100vh。
- 给
grid-container加box-sizing: border-box - 用
height: 100vh而非min-height，并确认没有其他 height 冲突（比如父元素设了display: flex但没设align-items: stretch） - 若需严格贴顶贴底，考虑配合
body { margin: 0; }和html { height: 100% }
repeat() 里嵌套 auto-fit 和 minmax() 总不生效？
repeat(auto-fit, minmax(250px, 1fr)) 看似聪明，但实际依赖容器宽度和子项最小内容宽。如果某子项文字过长没换行，或图片没设 max-width: 100%，minmax() 的“最小”就被撑破，auto-fit 就放弃收缩。
- 子项必须支持软换行：
word-break: break-word或overflow-wrap: break-word - 图片/iframe 等替换元素加
max-width: 100%; height: auto - 别在
minmax()第一个参数写死过大值（如400px），它会强制每列至少那么宽
grid-template-columns/rows 用 calc() 计算时单位混用报错？
css 中 calc() 不允许不同单位直接相加减，比如 calc(1fr - 20px) 合法，但 calc(1fr - 20)（缺单位）或 calc(100% + 1em)（百分比+em）在部分旧浏览器会静默失败或回退。
立即学习“前端免费学习笔记（深入）”；
- 所有数值必须带单位：
calc(1fr - 20px)✅，calc(1fr - 20)❌ - 避免跨维度混合：
100%（相对父宽）和1fr（相对剩余空间）本质不同，不要混在同一个calc()里 - 复杂计算建议拆到 js 动态写内联 style，CSS 层面优先用原生网格能力替代硬算
网格线编号、隐式轨道、track sizing 函数之间的优先级关系，才是最常被忽略的执行顺序问题——它们不按书写顺序执行，而是按规范定义的 track sizing algorithm 步骤走。改一个值，可能触发整行重算，不是表面看起来那么简单。