显式网格由grid-template-columns和grid-template-rows明确定义行列轨道，仅控制初始结构；超出部分由隐式网格承载，其尺寸由grid-auto-rows/columns等控制，默认auto。
显式网格是你亲手写的 grid-template-columns / grid-template-rows
它只定义初始轨道，不决定最终有多少行或列。比如写 grid-template-columns: 1fr 1fr，就只声明了两列；放 5 个子项时，浏览器不会多造两列来“补满”，而是按 grid-auto-flow: row（默认）规则换行——结果是 3 行，但第 2、3 行属于隐式网格，不受你那两列声明控制。
常见错误现象：
- 以为
grid-template-columns: 200px 200px能撑出 4 列，结果第 3 个子项直接跳到第二行左端 - 给容器设了
grid-template-rows: 100px，但第 2 行高度却是 auto，内容高就高、矮就矮
隐式网格是浏览器自动创建的轨道，尺寸由 grid-auto-rows / grid-auto-columns 控制
只要子项超出显式轨道容量，浏览器就会生成隐式行或列。它的尺寸默认是 auto，也就是“内容多高就多高”“内容多宽就多宽”，不是继承显式轨道的值。
所以如果你看到多行卡片高度不一致，大概率是因为没设 grid-auto-rows。例如：
container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 缺少 grid-auto-rows: 200px; */
}
此时每行高度都随该行最高子项浮动，视觉上像错位，其实只是隐式行没统一定高。
关键点：
-
grid-auto-rows只影响隐式行，对grid-template-rows定义的显式行无效 - 显式网格里写了
grid-template-rows: 100px 200px，第 3 行起才走grid-auto-rows - 负向网格线（如
grid-row: 2 / -1）始终从显式网格末尾计数，隐式轨道不参与编号
grid-auto-flow 决定隐式轨道怎么生成、往哪填
它的值直接影响隐式网格的形态和项目落点。默认 row 是最常用模式，但也容易误判行为：
-
grid-auto-flow: row→ 新项从左到右填满当前行，再开新行（隐式行） -
grid-auto-flow: column→ 新项从上到下填满当前列，再开新列（隐式列） -
grid-auto-flow: row dense→ 允许回填前面空出的格子，但会打乱 DOM 顺序，调试时难追踪
典型陷阱：在响应式卡片列表中用了 dense，结果标题和描述被拆到不同行，视觉断裂——这不是 bug，是 dense 主动重排的结果。
显式网格只是“画布起点”，不是容器边界
很多人误以为写了 grid-template-rows: 100px 就锁死了整个容器高度，其实它只管第一行；后面所有行都是隐式轨道，高度完全独立。真正限制整体高度的是容器自身的 height 或 max-height，和显式网格无关。
最容易被忽略的细节：
- 用
grid-row: 5定位一个子项，但显式只定义了 1 行 → 浏览器必须创建第 5 条隐式行线，而这条线的高度仍是auto，除非你配了grid-auto-rows -
gap对显式和隐式轨道都生效，但它不触发隐式轨道生成；只有内容溢出或定位越界才会触发 - 显式网格的列线编号（1, 2, 3…）固定不变，隐式列线从显式末尾继续编，比如 3 列显式 → 第 4 条列线就是 4，不是 1
复杂点在于：显式与隐式共存时，样式控制权是分离的。你得同时盯住两套规则，漏掉 grid-auto-rows 或误读 grid-auto-flow，布局就悄无声息地失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
