显式网格仅定义初始行列结构，隐式网格才真正决定轨道总数；它由内容数量、定位属性及gap等触发自动生成，尺寸由grid-auto-rows/columns控制，且受grid-auto-flow方向与dense模式影响。
显式网格定义了什么，隐式网格才真正决定轨道数量
显式网格只是你用 grid-template-columns 和 grid-template-rows 明确写出来的行列；它不决定最终有多少轨道——真正决定轨道总数的是内容数量和显式网格能否“装下”它们。只要子元素超出显式定义的范围，浏览器就会自动生成隐式轨道来容纳，数量完全由内容驱动。
常见错误现象：grid-template-columns: 1fr 1fr; 定义了 2 列，但放了 5 个子项时，你以为会自动换行成 3 行，结果发现所有项目挤在第 1 行、溢出容器——这不是轨道没生成，而是你没触发换行逻辑（缺 grid-auto-flow: row 或没留足空间）。
- 显式网格只提供“初始画布”，不是“硬性容器边界”
- 隐式网格轨道默认尺寸是
auto，即按内容撑开，不会主动限制高度/宽度 - 若想控制隐式行高，必须显式设置
grid-auto-rows，否则每行高度都随内容浮动
grid-auto-flow 控制隐式轨道生成方向和方式
grid-auto-flow 默认值是 row，意味着新项目优先填满当前行再换行；设为 column 则优先填满当前列再换列；加上 dense（如 row dense）会让浏览器尝试回填前面空出的轨道位置——但这可能打乱 DOM 顺序，慎用。
使用场景：响应式卡片列表需要严格按行排列、避免空洞，就别用 dense；而仪表盘小部件允许重排以节省垂直空间，可考虑 row dense。
-
grid-auto-flow: row→ 新项目从左到右、从上到下自动填充（最常用） -
grid-auto-flow: column→ 新项目从上到下、从左到右填充（适合长列表+固定列数） - 未设
grid-auto-rows时，row模式下每行高度 = 该行最高子项高度，不是统一值
col-span / row-start 等定位导致隐式轨道“被跳过”或“重复创建”
当你对某个子项设置 grid-column: 1 / -1（跨满整行），它会占据显式网格的所有列线；如果后续子项又设 row-start: 2，而显式只定义了 1 行，那 row-start: 2 就会强制创建第 2 条隐式行线——但此时若没配 grid-auto-rows，这行高度就是 auto，极易和上下行高度不一致。
典型陷阱：用 row-start 跳着写行号，却忘了显式网格里根本没预留那么多行线，结果隐式轨道尺寸失控，视觉上像“错位”或“塌陷”。
- 负向网格线（如
-1）始终从显式网格末尾开始计数，隐式轨道不影响其编号逻辑 -
col-span-3在grid-cols-4容器中合法，但在grid-cols-2中会直接溢出并创建隐式列轨道 - 手动定位 + 自动流混用时，建议统一用
grid-row/grid-column写全，避免部分属性缺失引发隐式轨道意外生成
gap 和容器尺寸计算错误，让隐式轨道“看起来没生成”
很多人调了半天发现“明明写了 6 个子项，怎么只显示 2 行？”，其实不是轨道没生成，而是 gap 加上显式列宽后总宽度 > 容器宽度，导致第 3 行被挤到视口外，或者因内容撑高 + grid-auto-rows: auto 导致某行极高，把后续行压到看不见的位置。
检查要点：打开开发者工具，看 computed 样式里的 grid-row-gap 和实际行高是否匹配；临时删掉 gap 类，观察轨道是否“突然出现”。
-
gap会参与网格轨道总尺寸计算，3 列 + 2 个gap: 10px→ 总间隙占 20px - 容器设了
width: 300px，显式列写100px 100px 100px，看似刚好，但加gap: 10px后总宽变成 320px → 第三列被截断或换行 - 用
minmax(200px, 1fr)+auto-fit时，若容器太窄，可能只生成 1 列隐式轨道，而非你预期的多列
隐式网格的生成逻辑藏在内容与显式定义的缝隙里——它不报错、不警告，只默默按规则补位。最容易被忽略的，是以为“写了 grid-template-rows 就锁死了行数”，其实只要内容多、定位偏、gap 大，隐式轨道随时会介入，且尺寸完全由你漏设的 grid-auto-rows 或 grid-auto-columns 决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
