列数由grid-template-columns轨道数决定，如1fr 2fr auto为3列；repeat()防手误；minmax()算1条轨道；grid-template-rows定义显式行但空行高度为0；auto-fit删空轨，auto-fill留空轨；grid-template-areas行列数须与rows/columns声明严格匹配。
grid-template-columns 怎么写才不“列数对不上”
列数不是靠肉眼数出来的，而是由 grid-template-columns 中的轨道定义个数决定的。比如写了 grid-template-columns: 1fr 2fr auto，那就一定是 3 列——不管子元素有几个、有没有跨列。
常见错误是把响应式断点里重复写 grid-template-columns 当成“改列数”，其实每次重写都覆盖了上一次，真正生效的只有最后匹配的那个规则。
- 用
repeat(3, 1fr)比手写1fr 1fr 1fr更安全，避免空格或逗号漏写 - 如果某列要撑满剩余空间，别只写
1fr，得确认父容器有明确宽度（比如width: 100%或设为inline-grid的块级上下文） -
minmax(200px, 1fr)这类函数会参与列数计算：它算作「1 条轨道」，不是两个
grid-template-rows 设置后为什么“看不见行高”
grid-template-rows 定义的是显式网格的行数，但内容没填满时，那些空行默认不可见——不是没生效，是高度为 0。
典型场景：你写了 grid-template-rows: 100px 1fr，但只放了一个子元素，默认它只占第一行，第二行存在但没内容，也不撑开高度。
立即学习“前端免费学习笔记（深入）”；
- 加
grid-auto-rows: 100px才能让后续隐式行也有高度（比如动态插入新元素时） - 用
align-content: start / end / center控制多行轨道在容器内的对齐，否则所有行会挤在顶部 - 调试时临时加
border: 1px solid red到 grid 容器，能看清显式行的边界
auto-fit 和 auto-fill 在列数计算上差在哪
这两个关键字只出现在 repeat() 里，比如 repeat(auto-fit, minmax(200px, 1fr)))，它们影响的是「最终渲染出几列」，但原理完全不同。
错误理解是“auto-fit 更智能”，其实它只是更激进地合并空轨道：当剩余空间不够放下一个最小轨道时，auto-fit 会把那条轨道直接删掉；auto-fill 则保留空白轨道。
- 用
auto-fit适合卡片列表，要尽量填满宽度、不留空列 - 用
auto-fill适合需要预留位置的布局（比如拖拽区域），即使当前没内容也要占位 - 两者都不改变
grid-template-columns声明本身的语法结构，只是运行时调整轨道数量
grid-template-areas 配合 rows/columns 时容易漏掉什么
当用 grid-template-areas 定义区域名时，grid-template-rows 和 grid-template-columns 的轨道数必须和字符串网格的行数、列数严格一致。少一行或多一列，整个声明就无效，浏览器会退回到默认单列流。
例如：grid-template-areas: "header header" "main sidebar" 是 2 行 × 2 列，那么 grid-template-rows 必须提供 2 个值（如 80px 1fr），grid-template-columns 也必须是 2 个（如 1fr 300px）。
- 字符串中每个单词是一个区域名，空格分隔列，换行分隔行——别用制表符或连续空格代替换行
- 区域名不能含短横线（
-）或数字开头，否则解析失败，整条声明被忽略 - 用
.表示空单元格，但它仍计入列数和行数，比如"a . c"是 1 行 × 3 列
grid-template-columns 轨道数、grid-template-rows 轨道数、grid-template-areas 字符串维度这三者是否咬死对齐。任意一处错位，网格就“塌”回普通文档流。 
