显式网格必须用grid-template-columns和grid-template-rows明确定义行列边界，未声明即无显式轨道；隐式网格在显式范围外自动创建，由grid-auto-rows/columns控制，默认尺寸为auto，负网格线编号始终从显式网格边界起算。
显式网格必须用 grid-template-columns 和 grid-template-rows 定义
显式网格是你“画出来的格子”——只要写了 grid-template-columns 或 grid-template-rows，就等于手动划定了行列边界。没写，就没有显式轨道。
常见错误是以为只写 display: grid 就算建了网格，其实这时只有隐式网格在起作用，所有子项会堆成一列（默认行为），根本不是你想要的“表格感”布局。
-
grid-template-columns: 1fr 2fr→ 明确两列，宽度比为 1:2 -
grid-template-rows: 100px auto→ 明确两行，第一行固定高，第二行自适应 - 哪怕只定义列、不定义行，
grid-template-rows缺省时仍算“无显式行”，此时行全靠隐式生成
隐式网格在显式范围外自动补位，由 grid-auto-rows 和 grid-auto-columns 控制
当子元素数量超过显式轨道数，或某个元素被 grid-row/grid-column 放到未声明的线号上（比如 grid-row: 5 / 7，但只定义了 3 行），浏览器就会悄悄创建隐式轨道来接住它。
这些轨道默认尺寸是 auto，也就是内容多高就多高，容易导致高度不一致、错位或撑开容器。这不是 bug，是设计行为。
立即学习“前端免费学习笔记（深入）”；
- 加
grid-auto-rows: minmax(100px, auto)可让所有隐式行至少 100px 高，内容多时再撑开 -
grid-auto-columns: 150px能统一隐式列宽，避免文字换行不可控 - 如果完全不想有隐式轨道，可设
grid-auto-rows: none（但会导致溢出或布局崩溃，慎用）
负网格线编号始终从显式网格边界开始算
即使用了大量隐式轨道，grid-column: -1 永远指向显式网格最右边那条线，不是整个容器最右边缘。这点常被忽略，导致定位偏移。
例如：grid-template-columns: 100px 100px（显式两列），后面又自动加了 3 条隐式列线，总共 6 条线（编号 1→6）。此时 grid-column: -1 还是指第 3 条线（即显式列末尾），不是第 6 条线。
- 隐式轨道不影响负数线号的起点
- 想锚定到最后一条线？得用正数编号（如
grid-column: 6），或改用grid-column: -1 / -1+grid-auto-flow: column组合试探 - 调试时用浏览器开发者工具的“网格叠加层”，能直观看到显式/隐式线的分界
显式和隐式共存时，grid-auto-flow 决定新项怎么填坑
显式网格像预留的“VIP座位”，隐式网格是“后排加座”。但新来的子项往哪坐，取决于 grid-auto-flow 的值。
默认是 row：优先填满当前行，不够就新开隐式行；设成 column 则优先往下填列；加 dense（如 row dense）会让小项目回头塞进前面空出的缝隙里——这可能导致 DOM 顺序和视觉顺序不一致。
- 不设
grid-auto-flow时，grid-row/grid-column显式定位的项不会触发 dense 行为 -
dense对性能有轻微影响，尤其项多时重排更频繁 - 混合使用显式定位和自动流时，建议显式项用
grid-area命名区域，避免与隐式流冲突
