隐式行是浏览器被动创建的轨道，并非多余；它仅在子项数量超显式行数或指定越界线号时触发，高度由grid-auto-rows决定，未设置时取子项min-content高度。
grid-auto-flow: row 默认不扩容，只填空
隐式行不是“多出来”的，而是你没给它设尺寸，浏览器用 auto 勉强撑出来的。默认 grid-auto-flow: row 只决定新项往哪塞（从左到右、填满当前行再进下一行），**它不生成新轨道，也不控制高度**——轨道是子项数量或显式线号超出时被动触发的，高度则由 grid-auto-rows 决定。
常见现象：写了 grid-template-columns: repeat(3, 1fr)，放了 7 个子项，结果第 4–6 项挤在第二行、第 7 项孤零零占第三行，但第三行看起来“空荡荡”或“塌缩”。这不是 Grid 多生成了行，是你没设 grid-auto-rows，第三行高为 auto，而第 7 项内容少，整行就塌了。
- 没设
grid-auto-rows时，隐式行高 = 子项自身高度（min-content），内容空或短，行就矮甚至不可见 -
grid-template-rows只管显式定义的那几行，对第 4 行起完全无效 - 开发者工具 Layout 面板里看到灰色虚线行，就是隐式行；hover 上去能看到“implicit row”，不是 bug 是机制
子项跨行或指定越界线号会强制创建隐式行
隐式行真正被触发，只有两种明确场景：grid-row 指向了不存在的线号，或者子项数量超过了显式定义的行数。比如：
-
grid-template-rows: 100px 100px（只定义 2 行），但某个子项写了grid-row: 1 / 4→ 浏览器必须生成第 3、4 条行线，对应第 3 行轨道就隐式出现了 - 显式只写
grid-template-rows: 200px（1 行），却放了 5 个子项 → 第 2–5 个子项全靠隐式行承载 - 用了
grid-area: "header" / "main"但命名区域没覆盖全部范围，剩余空间也会走隐式轨道
注意：grid-row: 1 / -1 不会触发隐式行（-1 指容器末尾线，始终存在），但 grid-row: 1 / 99 会——因为 99 这条线大概率不存在，浏览器得硬造出来。
gap 和 align-content 让隐式行“看起来多余”
你以为多出了空行，实际可能是 gap 或对齐方式把视觉间距放大了：
-
gap: 40px在小卡片里就像一道裂口，尤其当某行只有一个子项时，上下 gap 加起来显得“空得离谱” -
align-content: start把所有行堆在顶部，底部大片空白 → 不是多了行，是行没铺满容器 -
justify-content: center+ 固定列数 → 中间列有内容、两边列空着，gap一拉，空列间隙更刺眼
解决方向不是删隐式行（删不掉），而是控制它的表现：grid-auto-rows: minmax(80px, auto) 给底线高度，gap: 0.5rem 改用相对单位，align-content: stretch 让行高自适应填满。
auto-fit/auto-fill 动态列 + 跨行容易误判隐式行
用 repeat(auto-fit, minmax(240px, 1fr))) 时，列是动态显式生成的，但行仍是隐式的——这时如果某个子项写 grid-row: 2 / 4，而当前只生成了 1 行显式轨道，row 2 就得靠隐式行撑起来。问题在于：
- 响应式断点切换后，列数变少，原本
grid-row: 2 / 4可能指向根本不存在的线号，浏览器静默失效，子项回退到默认位置，布局错乱 -
grid-auto-flow: row dense会回头填空，但可能把本该在第 3 行的项塞进第 1 行空隙，视觉上像“多了一行”，其实是重排 - 最稳的做法：需要跨行，就显式定义
grid-template-rows（哪怕用repeat(5, minmax(0, 1fr)))），别依赖隐式行做关键布局
隐式网格不是后备方案，是应急机制。真正难的不是让它别出现，而是提前想清楚：哪些行必须存在、多高、谁来撑——然后用 grid-template-rows 或 grid-auto-rows 显式钉死，而不是等浏览器猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
