minmax(0, 1fr) 能解决列宽被撑开的问题，因其将轨道最小宽度设为0，跳过子项min-content计算，使fr严格按剩余空间分配；需配合box-sizing: border-box和正确语法使用。
minmax(0, 1fr) 为什么能解决列宽被撑开的问题
纯 1fr 实际等价于 minmax(min-content, 1fr)，浏览器会先按子项的「最小自然宽度」（比如带 padding 和 border 的文字块撑出的宽度）预留空间，导致列宽远超预期，破坏比例。改成 minmax(0, 1fr) 把下限设为 0，强制跳过 min-content 计算，让 fr 真正按剩余空间分配。
常见错误现象：grid-template-columns: 1fr 200px 下，左侧列比预期宽很多，尤其当子项含内边距或边框时。
- 必须写成
minmax(0, 1fr)，不能只写0 1fr（语法错误） - 仅对显式定义的轨道生效，
grid-auto-columns不受此影响 - IE 不支持该写法，需降级为
width: calc((100% - 200px) / 1)+ JS 检测
box-sizing: border-box 必须作用于 grid 子项，而非容器
即使列宽算对了，如果子项没设 box-sizing: border-box，那么 width: 100% 只作用于 content 区，padding 和 border 会额外加出去，造成溢出或错位。
正确做法是直接给所有 grid 直接子元素加：
立即学习“前端免费学习笔记（深入）”；
grid-container > * {
box-sizing: border-box;
width: 100%;
}-
* { box-sizing: border-box }全局设置不够——它不覆盖某些重置样式或第三方库的覆盖 - 避免在子项上同时写
width: 100%和padding却漏掉box-sizing - 若子项是
input或button，它们默认box-sizing: border-box，但依然建议显式声明以保一致
gap 不是“视觉留白”，它参与总宽计算
gap 是刚性占位，会从容器总宽中直接扣除。例如 grid-template-columns: 1fr 1fr + gap: 10px，实际三等分的是「容器宽 − 10px」，不是容器宽本身。很多人误以为 gap 只是渲染层间隔，结果发现列宽总和不对。
- 检查父容器是否有未被
box-sizing: border-box覆盖的padding或border，它们会进一步压缩可用空间 - 不要在 grid 子项上设
width或min-width，尤其width: 100%会无视 gap 预留，强行占满轨道 - 验证技巧：临时加
outline: 1px solid red到子项，看红色边框是否紧贴列边界——溢出即说明盒模型超出轨道
minmax(min-content, auto) 对高度坍塌无效，别混用
minmax(min-content, auto) 在 grid-template-rows 中能撑开空行，但它解决的是「行轨道高度」问题；而盒模型宽度坍塌是「列轨道 + 子项盒模型」协同失效的结果。两者机制不同，不能互相替代。
最容易被忽略的一点：你把 minmax(0, 1fr) 写对了，box-sizing 也加了，但子项里嵌套了一个 display: contents 的容器——它不产生盒模型尺寸，整列仍会坍缩到 0。
调试时，不要只盯着 CSS 规则，直接看 DevTools 的 Computed 面板里子项的 width、padding、border 是否真实生效且相加后 ≤ 所在轨道宽度。
