grid-auto-rows: 1fr 对等高布局无效，因其仅作用于隐式创建的行轨道，而显式网格（如默认源顺序排列）由 grid-template-rows 控制；应使用 grid-template-rows: 1fr 1fr 并确保父容器有明确高度来源。
grid-auto-rows: 1fr 不能实现动态高度均衡自适应——它只对**隐式创建的行轨道**生效，而显式定义的 grid-template-rows 才控制实际内容所在行的高度分配。
为什么 grid-auto-rows: 1fr 对等高布局无效
当容器中子元素明确位于第 1 行和第 2 行（如未设 grid-row，按源顺序自动填入），它们属于**显式网格轨道**，完全由 grid-template-rows 决定高度。grid-auto-rows 只在元素被显式定位到超出当前定义范围的行（例如 grid-row: 5）时，才生成新行并应用该值。日常双栏、标题+内容等结构几乎不会触发它。
- 常见误用：
grid-auto-rows: 1fr单独设置后发现两个 div 高度完全不一致——因为它们压根没进“自动行” - 浏览器 DevTools 的 Layout 面板里能看到：只有
grid-template-rows下的轨道有尺寸，grid-auto-rows对应的轨道根本没出现 - 它设计初衷是应对“动态插入未知数量 item”的场景（如 JS 追加卡片），不是做静态等高
grid-template-rows: 1fr 1fr 才是可靠解法
显式声明两行均分可用空间，Grid 引擎会强制拉伸两个子元素填满各自轨道，且同步响应内容变化（换行、字体缩放、图片加载完成）。
- 必须确保父容器有明确高度来源：要么自身设了
height/max-height，要么是视口单位（100vh），或被 flex/grid 父级约束 - 若父容器高度由内容撑开（
height: auto），1fr会退化为min-content，失去弹性——此时应改用minmax(min-content, max-content) - 避免给子元素设
height或min-height，否则会覆盖轨道分配逻辑
内容高度差异大时的容错处理
当上下区域内容量悬殊（如顶部仅一行标题、底部大段文本），单纯 1fr 1fr 会让标题区过度拉伸。这时需让轨道“最小不压缩、最大可伸展”：
- 用
grid-template-rows: minmax(min-content, max-content) minmax(0, max-content)：第一行随标题自然高度，第二行从 0 开始拉伸到内容总高 - 若需视觉上“底部对齐但高度同步”，加
align-items: stretch（默认值，通常无需显式写） - 警惕
display: contents：若某个子元素用了它，其内容会脱离盒模型，导致min-content计算为 0，第一行塌陷
容易被忽略的兼容性细节
看似简单的 1fr 在旧版 Safari（iOS 14.5 之前）和部分 Electron 内核中行为异常：它可能把 1fr 1fr 解释为“各占 50% 容器高度”，而非“均分剩余空间”，导致滚动时高度跳变。
- 稳妥做法：对需要支持 iOS 14 的项目，加回退方案
@supports not (grid-template-rows: 1fr 1fr) { ... } - 测试时务必打开真机调试：模拟器常掩盖
line-height和字体渲染差异引发的高度微调 - 不要依赖
auto做等高——它只取初始化时的min-content，后续内容加载或换行完全不响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
