1fr分配的是网格容器在扣除固定尺寸、minmax()最小值及内容固有尺寸后的剩余可用空间；其优先级低于固定值、minmax()的min值和内容尺寸，且不保证不溢出，嵌套时每层独立计算。
1fr到底在分谁的“空间”
它分的是网格容器（grid-container）在指定轨道方向上**扣除所有固定尺寸、minmax()最小值、内容固有尺寸之后剩下的可用空间**，不是整个容器宽度或高度。比如容器宽800px，里面放了两个1fr列，但第一列里有个width: 300px的子元素，第二列里只有文字，那第一列不会被压缩到400px——它至少占300px，剩余500px才由两列按1:1再分。
1fr和auto、fit-content、minmax()混用时谁优先级高
1fr是弹性分配，但必须等其他轨道“先拿走自己要的部分”后才参与剩余空间分配。顺序是：固定值 → minmax(min, max)的min部分 → 内容固有尺寸（如图片宽、文字撑开的宽）→ 剩余空间交给fr均分。
-
grid-template-columns: 200px 1fr minmax(100px, 1fr))：第一列死定200px；第三列至少100px，最多不超过1fr能分到的量；第二列拿走剩下所有 - 如果某列设
minmax(200px, 1fr)，而总剩余空间只有150px，那这列会收缩到min即200px，导致整体溢出——fr不保证不溢出
为什么设置了1fr却没铺满？常见错因
多数情况不是1fr失效，而是父容器没给明确尺寸，或者被其他CSS“截断”了可用空间。
- 父容器
display: grid但没设width/height，且内部没有内容撑开，导致可用空间为0 →1fr分到0 - 用了
grid-template-rows: 1fr，但容器父级是height: auto，没高度来源 → 行高算出来是0 - 写了
grid-gap（或gap），间隙也从可用空间里扣，不是额外加的 - 子元素设置了
width: 100%但父列是1fr，结果子元素按百分比算的是列宽，而非容器宽——容易误判“没铺满”
1fr在嵌套网格里怎么算
每一层网格只管自己容器内的可用空间，1fr不会跨层级继承或穿透。外层1fr分完后，把得到的宽度传给内层容器；内层再基于自己的width和子项约束，重新算它的“可用空间”。
例如外层grid-template-columns: 1fr 2fr，左边列拿到300px宽；里面再写grid-template-columns: 1fr 1fr，那它内部两个子列各分150px，不是各分外层容器一半。
嵌套越深，越容易忽略：每层fr都是独立结算的，不是全局比例尺
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
