fr单位本身不定义最小宽度，它仅在固定宽、minmax最小值及内容固有宽满足后，对剩余空间按份数比例分配；最小宽度需通过minmax()、子项min-width: 0及容器有效尺寸三者协同控制。

fr单位本身不定义最小宽度，它只参与剩余空间分配

fr不是尺寸单位，而是“份数”——它只在固定宽、minmax最小值、内容固有宽被满足后，才对剩下的可用空间做比例切分。你写1fr，等价于minmax(min-content, 1fr)，其中min-content由子项内容决定（比如一个长单词的宽度），浏览器必须先保这个下限，再分剩余空间。所以1fr列可能被撑到300px，哪怕你期望它最小200px。

想设最小宽度，必须显式用minmax()替代1fr

直接写grid-template-columns: 1fr 1fr无法控制最小列宽；要加底线，就得替换为minmax()：

• minmax(200px, 1fr)：列宽至少200px，超出部分按比例分剩余空间
• minmax(0, 1fr)：允许压缩到0，解决长内容撑开问题（但需配合min-width: 0）
• 避免混用minmax(200px, 1fr)和auto，后者仍按min-content算，会破坏一致性

子项min-width: auto是隐形干扰源

即使轨道写了minmax(200px, 1fr)，如果子项没设min-width: 0，它的默认min-width: auto仍会强制列宽不低于内容最小宽度（如未折行URL）。常见表现：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 加了white-space: nowrap后列宽突变
• DevTools Computed面板里min-width显示auto而非0
• 嵌套Flex/Grid时，内层子项也得同步加min-width: 0，否则撑开会传递

容器没尺寸，fr根本不会启动

fr依赖可用空间，如果Computed面板里容器width或height是0px，1fr就只是摆设：

立即学习“前端免费学习笔记（深入）”；

• 父容器是Flex时，若方向为row却没设min-height，Grid子容器高度退化为auto，grid-template-rows: 1fr失效
• 临时加min-width: 100px或border: 1px solid能快速验证Grid是否真正运行
• width: 800px本身不导致失效，但混用px和fr时，小数像素舍入会让列宽肉眼不均

真正起作用的最小宽度控制，从来不在fr本身，而在minmax()轨道定义 + 子项min-width: 0 + 容器尺寸上下文这三层共同约束。漏掉任何一层，fr都会“看起来失效”。