显式网格必须用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，是设计行为。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 加 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 命名区域，避免与隐式流冲突

显式网格是骨架，隐式网格是血肉；骨架不搭好，血肉再丰沛也立不住。真正难的不是写对属性，而是判断哪些该显式锁定、哪些该留给隐式弹性处理——这往往取决于内容是否稳定、是否需要响应式重构、以及是否允许 DOM 顺序与视觉顺序分离。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！