grid-template-rows和grid-template-columns是定义显式网格的必需属性，必须写在容器上，值为轨道尺寸序列；fr单位按剩余空间分配，非百分比；repeat()配合auto-fit和minmax()可实现响应式列布局；隐式网格需用grid-auto-rows等控制溢出项高度。
grid-template-rows 和 grid-template-columns 是定义显式网格的唯一直接方式
它们不是“可选配置”，而是你画出网格骨架的必需笔触。只要没写这两个属性，display: grid 只创建了一个空容器——没有行、没有列、没有轨道，后续的 grid-column 或 grid-row 会默认落到隐式网格里，行为难以预测。
- 二者必须写在**容器元素**上，子项无法通过自身样式定义行列结构
- 值是一组用空格分隔的轨道尺寸（track size），顺序即从左到右（列）、从上到下（行）
- 不支持简写合并成一个属性；
grid-template虽能整合，但语法更复杂且可读性差，不推荐新手用 - 若只定义了
grid-template-columns而没写grid-template-rows，所有子项将堆叠在第一行——这不是 bug，是规范行为
fr 单位不是“百分比”，它是剩余空间的弹性切片
很多人误以为 1fr ≈ 33.33%，其实它只在所有轨道都用 fr 时才等效。一旦混入 px、% 或 auto，计算逻辑立刻变化。
-
grid-template-columns: 200px 1fr 2fr：先扣掉 200px 固定宽度，剩下空间按 1:2 切成两份，不是按总宽三等分 -
grid-template-columns: 1fr 1fr auto：前两列平分“减去 auto 列内容宽度后的剩余空间”，auto列由自身内容撑开，可能挤压其他列 - 避免在同一个轨道列表里混用
%和fr——%相对于容器宽，fr相对于剩余空间，两者基准不同，结果难推演
repeat() 不只是缩写，它是响应式布局的关键杠杆
repeat(4, 1fr) 看似只是 1fr 1fr 1fr 1fr 的简写，但它真正价值在于配合 auto-fit 和 minmax() 实现自动列数调整。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))：每列至少 250px，容器够宽就多放一列，不够就自动换行——无需媒体查询 -
repeat(3, 100px)和100px 100px 100px渲染完全一致，但前者更易维护，尤其当列数达 6+ 时 - 别对
grid-template-rows盲目套用repeat(auto-fit...)：行高通常依赖内容，auto-fit在行方向效果有限，更适合列布局
显式网格之外还有隐式网格，漏设 grid-auto-rows 会导致高度失控
当你有 10 个子项，但只定义了 grid-template-rows: 60px 80px（仅两行），浏览器会自动生成第 3、4… 行来容纳剩余项目——这些就是隐式行，其高度默认为 auto，也就是由内容撑开。
立即学习“前端免费学习笔记（深入）”；
- 后果：卡片高度不一致、底部留白突兀、滚动体验割裂
- 修复：加一句
grid-auto-rows: minmax(120px, auto)，保证所有隐式行最小 120px，内容多时仍可伸展 - 注意：
grid-auto-rows不影响显式定义的行，只管“多出来的那些行” - 同理，
grid-auto-columns用于控制超出显式列数时的列宽，但实际中列溢出较少见
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); grid-template-rows: 72px; /* 头部固定高 */ grid-auto-rows: minmax(140px, auto); /* 其余行统一基线 */ gap: 16px; }显式网格定义的是你“计划中的结构”，而隐式网格处理的是“现实中的意外”。跳过 grid-auto-rows 就像只设计楼层不考虑承重，表面能用，一加内容就露馅。