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 前端开发

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))，别依赖媒体查询硬切列数

实际中容易被忽略的是：fr失效往往不是单一原因，而是父容器高度缺失、子项min-width: auto、以及box-sizing未覆盖伪元素这三者叠加。调试时得一层层剥开Computed值，而不是反复改grid-template-rows。