fr单位失效的根本原因是可用空间缺失，需检查computed面板的width/height是否为0、父容器尺寸约束（如flex缺min-height）、子项min-width未设0等三层原因。
fr单位失效时，先看Computed面板里的width和height是不是0
fr单位不是“自动生效”的魔法值，它必须有明确的可用空间才能计算。如果Computed面板里width或height显示0px，哪怕display: grid亮着、grid-template-columns: 1fr 1fr写得再标准，fr也根本没启动。这不是语法错误，是尺寸上下文缺失。
临时加border: 1px solid red和min-width: 100px（列方向）或min-height: 100px（行方向），观察网格项是否开始按轨道排列——这是最快验证Grid逻辑是否真正运行的方法。
- 如果加了
min-width后列宽突然均等了，说明问题出在容器自身没获得块级尺寸基础 - 如果加了也没反应，继续检查父容器是否约束了交叉轴（比如Flex父级缺
min-height） - 别只信Styles面板里的声明，Computed才是最终渲染依据
父容器是Flex时，fr失效大概率因为交叉轴没高度
Flex容器默认align-items: stretch，但这个“拉伸”前提是父容器自身有交叉轴尺寸。比如Flex方向是row，那它的height或min-height必须显式设置，否则子Grid容器的height会退化为auto甚至0px，grid-template-rows: 1fr自然无从分配。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- Flex父容器必须带
min-height或height（如min-height: 300px或height: 100vh） - Grid子容器不能只靠
display: grid，要加width: 100%或flex: 1确保它能撑满主轴 - 避免
align-items: flex-start这类值，它会直接切断stretch行为
容器设了width: 800px，fr还是错位？检查max-width替代方案
固定width本身不导致fr失效，但会让“可用空间”变得刚性且易受舍入误差影响。尤其当混用px和fr（如grid-template-columns: 200px 1fr 1fr），浏览器扣完固定值再平分剩余像素，小数宽度下舍入偏差肉眼可见。
- 优先用
max-width: 800px; width: 100%代替width: 800px，让fr始终基于当前视口宽度计算 - 需要侧边栏？改用
grid-template-columns: 200px minmax(0, 1fr)，minmax(0, 1fr)比纯1fr更抗内容撑裂 - 给Grid子项统一加
min-width: 0，否则长文本或图片会强制撑开所在列，破坏fr比例
grid-template-columns里写50%为什么没反应
grid-template-columns根本不支持百分比值——你写50% 50%会被浏览器静默忽略，回退到auto或触发解析失败。这不是bug，是规范限制。
- 等分两列请用
1fr 1fr或minmax(0, 1fr) minmax(0, 1fr) - 想保底最小宽度？
minmax(280px, 1fr)比1fr更可控 - 响应式列数用
repeat(auto-fit, minmax(280px, 1fr))，别依赖媒体查询硬切列数
min-width: auto、以及box-sizing未覆盖伪元素这三者叠加。调试时得一层层剥开Computed值，而不是反复改grid-template-rows。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
