fr单位按扣除固定尺寸后的剩余空间比例分配，非容器总宽等分；混用%与fr会因计算基准不同导致布局失控；响应式列数应依赖repeat(auto-fit, minmax())而非单纯fr；子项拉满高度需容器有明确高度且避免align-items限制。
fr 单位不是“按容器总宽等分”，而是按扣除固定尺寸后的剩余空间来按比例切分——写 1fr 2fr 不等于“占 1/3 和 2/3 容器宽”，这点错得最多。
fr 分配的是“减掉已确定尺寸”之后的剩余空间
浏览器先划出所有显式尺寸（px、%、内容最小宽等），再把剩下的宽度按 fr 数值比例分配。比如：grid-template-columns: 200px 1fr 2fr：
- 容器总宽 900px → 先扣掉 200px，剩 700px
- 后两列按 1:2 分，分别是 ≈233px 和 ≈467px
- 不是按 900px 的 1/3 和 2/3（300px / 600px）算的
如果某列子项有 min-width: 300px，那它至少占 300px，fr 就会压缩其他列，甚至导致换行或溢出。
混用 % 和 fr 会破坏预期布局
% 基于容器总宽计算，fr 基于剩余空间，两者基准不同，强行混用会让结果不可控：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: 50% 1fr：先按总宽 50% 划出第一列，剩下 50% 再交给1fr—— 第二列实际只有总宽一半 - 想让左右固定、中间自适应？直接写
250px 1fr 250px，别加% - 要兼顾最小宽度和弹性？改用
minmax(250px, max-content) 1fr minmax(250px, max-content)，但注意max-content可能撑破容器，需配min-width: 0和overflow: hidden
响应式多列自动适配靠 repeat(auto-fit, minmax())
不用写一堆 @media，一行搞定动态列数：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))-
auto-fit会合并空轨道（推荐），auto-fill会留白（慎用） - 容器宽 800px → 最多放 2 个 ≥300px 的列，剩余空间均分给这两列
- 容器宽 250px → 连一列都塞不下，自动退为单列，
1fr占满
这个模式真正起作用的，是 minmax() 和 auto-fit 的协商逻辑，不是单独写几个 1fr 就能生效。
子项撑不满高度？align-self: stretch 不一定够用
即使列轨道用了 1fr，子元素默认也不会自动拉满高度：
- 确保容器有明确高度（如
height: 100vh或固定值） - 子项设
align-self: stretch（默认值，但父容器align-items不能是start等） - 更稳妥的做法是加
height: 100%或min-height: 100%，尤其当子项内有嵌套结构时 - 防内容溢出：对可能文本过长或图片撑开的子项，加
min-width: 0和overflow: hidden
fr 的“灵活”是有前提的：它只管分配空间，不管内容是否溢出、是否换行、是否被父级约束——这些都得你手动兜底。
