grid-template-rows: 1fr 2fr 表示第一行占剩余空间的1/3、第二行占2/3，但需确保容器有明确高度且已扣除gap与固定尺寸，fr仅分配剩余空间。
grid-template-rows 里写 1fr 2fr 是最直接的方式
想让第一行占剩余空间的 1/3、第二行占 2/3，直接写 grid-template-rows: 1fr 2fr 就行。注意：这不等于“第一行高 33%、第二行高 67%”，而是浏览器先扣除所有已确定高度（比如固定 100px 行、gap、内容固有最小高度）后，把剩下的空间按份数切分。
常见错误现象：1fr 2fr 结果两行一样高，或第二行根本没变宽——大概率是某行里塞了个 min-height: 200px 的元素，或者父容器没设 height，导致“剩余空间”为 0。
- 必须确保网格容器有明确高度上下文（如
height: 500px或min-height: 400px），否则fr无空间可分 -
gap会提前从总高里扣除，比如gap: 1rem+ 两行1fr 2fr，实际分配的是 “容器高 − 1rem” - 避免混用
%和fr，例如50% 1fr：第一行先占一半，1fr只能分剩下那半，比例就崩了
需要某行“由内容撑开”，其他行按 fr 分配？用 auto 搭配 fr
auto 不参与份数计算，它先按内容自然高度占位，剩下的空间才交给 fr 行去分。比如做顶部导航栏 + 主内容区布局，常用 grid-template-rows: auto 1fr。
但要注意：auto 行如果内容本身很高（比如一堆文字或大图），会吃掉大量空间，1fr 行可能被压成一条线。这时候得加约束：
- 给
auto行加max-height或minmax(max-content, 200px)防止失控 - 如果
auto行里有图片或 flex 容器，它们默认带min-height: auto，可能锁死高度；加min-height: 0才能让auto真正“随内容” -
1fr行若要支持内容溢出滚动，得额外设overflow: auto，否则内容会撑破容器
想让某行“最小不缩、最大弹性”，用 minmax(0, 1fr)
minmax(0, 1fr) 和单纯写 1fr 行为不同：前者允许该行收缩到 0（只要内容允许），后者受 min-width: auto 影响，默认最小高度约等于内容的 min-content 高度。
典型场景：折叠面板区域、动态显示/隐藏的工具栏。当内容为空时，你希望它彻底消失，而不是留一条空白缝。
- 必须写
minmax(0, 1fr)，不能只写minmax(0, 1fr)——0是关键，它覆盖了浏览器默认的最小尺寸限制 - 如果该行里有子元素设置了
height: 100%或flex: 1，会阻止收缩，需同步改子元素的min-height - DevTools 里看到该轨道标灰或划掉？检查是否漏了
minmax()外层包裹，0 1fr这种写法无效
多行比例混合时，最容易忽略的其实是内容自身高度
很多人调了半天 1fr 2fr 1fr，发现中间行就是不占两份——最后发现是中间行里有个 div 设了 height: 300px，直接撑满了整个可用空间，fr 根本没机会介入。
真正决定最终高度的，永远是“内容固有尺寸 + 轨道定义 + 约束规则”的共同结果，fr 只是其中一环。
- 用 Chrome DevTools 的 Grid 面板（Elements → Layout → Grid）实时看每行实际分配了多少像素，比猜更准
- 临时加
outline: 1px solid red到各行，能快速定位哪一行被内容意外撑开 - 如果某行内容不可控（比如 CMS 插入的富文本），优先用
minmax(min-content, 1fr)替代纯1fr，给内容留出呼吸空间
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
