显式网格与隐式网格分工协作：前者用grid-template-定义主干结构，后者用grid-auto-动态兜底补空间，并通过grid-auto-flow控制填充逻辑。
显式网格和隐式网格不是互斥关系，而是分工协作：显式网格负责“主干结构”，隐式网格负责“动态兜底”。关键在于用好 grid-template-* 和 grid-auto-* 这两组属性的配合。
显式网格定骨架，隐式网格补空间
显式网格由 grid-template-columns 和 grid-template-rows 明确声明，决定容器初始有多少列、多少行，以及它们的尺寸。比如：
-
grid-template-columns: 1fr 2fr;—— 固定两列，比例分配宽度 -
grid-template-rows: 80px auto;—— 固定两行，首行固定高，次行自适应
当子元素数量超过这两条规则能容纳的格子数（例如定义了 2×2 显式网格，却放了 6 个子项），超出的部分就会触发隐式网格：浏览器自动创建额外的行或列来安放这些项。
用 grid-auto-rows/columns 控制隐式轨道大小
隐式轨道默认尺寸是 auto，即按内容撑开——这容易导致高度不一致、布局松散。应主动设置 grid-auto-rows 或 grid-auto-columns 来统一风格：
-
grid-auto-rows: 120px;—— 所有隐式生成的行都固定为 120px 高 -
grid-auto-rows: minmax(100px, auto);—— 隐式行最小 100px，内容多时可弹性增高 -
grid-auto-columns: 1fr;—— 隐式列按剩余空间等分（适合横向滚动或动态列场景）
注意：grid-auto-rows 只影响隐式行，对显式定义的行无作用；同理，grid-auto-columns 不改变 grid-template-columns 已设的列。
配合 grid-auto-flow 实现填充逻辑
grid-auto-flow 决定新项如何填入空位，直接影响显隐网格的衔接方式：
-
grid-auto-flow: row;（默认）—— 优先填满当前行，再新建隐式行 -
grid-auto-flow: column;—— 优先填满当前列，再新建隐式列（适合瀑布流式布局） -
grid-auto-flow: row dense;—— 启用“密集填充”，允许后出现的小项回填前面显式网格留下的空洞，提升空间利用率
例如，一个显式 3 列网格中，若第 1 行第 2 格被一个跨 2 列的项占据，留下第 1 行第 3 格为空，dense 模式会让后续小项优先塞进这个空位，而非一律往后追加隐式行。
响应式场景下推荐 auto-fit + minmax 组合
在卡片列表、图库等不确定数量的布局中，显隐配合最实用的写法是：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
这里 auto-fit 属于显式声明，但它的行为依赖隐式网格机制：浏览器先尝试在显式轨道中尽可能多铺列，不足时自动收缩列宽至 minmax() 下限；空间富余时则拉伸到 1fr。实际渲染中，列数会随容器宽度动态增减，背后就是显式语法触发隐式轨道的智能生成与回收。
