fr单位专为按比例分配可用空间设计，代表剩余空间的一份，需容器有明确尺寸才能可靠工作；常用于grid-template-columns/rows中按份数切分，可与minmax()配合实现响应式自适应，但不适用于无宽高的父容器或隐式网格轨道。
在 H5 中使用 CSS Grid 布局时，fr（fraction）单位是专为按比例分配**可用空间**设计的，它不等于像素或百分比，而是代表“剩余空间的一份”。只要容器有明确尺寸（如 width/height 已知），fr 就能可靠工作——这正是它比 % 更安全、比 px 更灵活的关键。
fr 的基本用法：列宽/行高按份数切分
fr 只在 grid-template-columns 或 grid-template-rows 中生效。写法直接明了：
-
grid-template-columns: 1fr 2fr;→ 第一列占剩余空间的 1/3，第二列占 2/3 -
grid-template-rows: 1fr 1fr 2fr;→ 三行高度比为 1:1:2，总和填满容器高度 -
grid-template-columns: 100px 1fr 2fr;→ 先固定第一列 100px，再把剩下的宽度按 1:2 分给后两列
fr 与 minmax() 配合实现响应式自适应
单独用 fr 容易导致内容被过度压缩（比如文字挤成一行）。推荐搭配 minmax() 控制最小宽度：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) );- 含义：每列至少 200px，最多可伸展到 1fr（即均分剩余空间），容器变窄时自动减少列数
- 注意：
auto-fit会让空轨道塌缩，auto-fill则保留空轨道位置
fr 不适用的常见误区
fr 依赖容器有“已知的可用空间”，以下情况它会失效或表现异常：
- 父容器没有设置
width或height（比如div默认 width: auto，但 height: auto 不触发 fr 计算） - 在
grid-auto-columns或grid-auto-rows中单独用 fr（隐式网格轨道不支持 fr，需显式定义） - 混用
fr和%时未注意参考基准：% 相对父容器宽/高，fr 相对当前网格轨道的可用空间
一个实用小技巧：用 fr 替代 flex 的 flex: 1
当需要让多个子项均分容器宽度，且结构更可控（比如要加间隙、跨行等），Grid 比 Flex 更清晰：
- Flex 写法：
display: flex; > div { flex: 1; }—— 简单但难控制间距和换行 - Grid 写法：
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;—— 列数固定、间隙统一、天然响应式
