grid-template三段式语法必须严格按“区域定义 行定义 / 列定义”顺序书写，区域名须用统一引号包裹，缺一不可；否则整条声明被忽略。
grid-template 三段式语法怎么写才不报错
直接用 grid-template 一行定义行列和区域，必须严格按「行定义 [区域定义] / 列定义」顺序，中间用 / 隔开；区域定义可选，但一旦出现，就必须用引号包裹字符串，且不能和行列值混序。
- 正确：
grid-template: "header header" 80px "main sidebar" 1fr / 1fr 200px;（区域 + 行高 + 列宽） - 错误：
grid-template: 80px "header header" / 1fr 200px;（区域名前插了行高 → 整条声明被浏览器忽略） - 错误：
grid-template: "header header" 80px / 1fr 200px;（缺区域定义的第二段，但写了区域字符串 → 解析失败） - 区域字符串中每个单词代表一个单元格，每组引号内空格数 = 列数；引号必须统一（全用双引号或全用单引号），不能
'header' "main"这样混用
grid-template-areas 合并多行多列时的占位规则
用字符串网格“画”区域时，grid-template-areas 不关心尺寸，只靠名字连通跨行跨列的单元格。但它对格式极其敏感——漏掉一个 . 或列数不齐，整个声明就失效。
- 所有行的字符串内单词数必须一致，比如第一行
"a b c"是三列，第二行就不能写"d e"，得补成"d e ."或"d e f" - 未使用的单元格必须用英文点号
.占位，写成空字符串""、空格或直接跳过都会导致解析异常 - 区域名含短横线（如
user-info）必须加引号，否则 CSS 当作减法运算：user - info→ 语法错误 - 换行不能脱离引号，
"header header""main sidebar"（无连接符）→ 不是合法 CSS 字符串，会被截断
grid-column / grid-row 跨行列合并比 grid-template-areas 更灵活的场景
当你要让某个元素动态跨越固定数量的轨道（比如“标题总占前两列”，不管容器是三列还是五列），grid-column 和 grid-row 比字符串区域更可靠——它不依赖全局命名，也不受行列数对齐约束。
-
grid-column: 1 / span 2;表示从第 1 条网格线开始，向右跨 2 个轨道（即占满前两列），无论总列数多少 -
grid-row: span 3;会从自动分配的起始行向下跨 3 行，适合内容长度不确定的卡片布局 - 负数线号可用：
grid-column: -3 / -1;等价于倒数第三线到末线，适合右对齐或尾部固定区域 - 注意：
span的起点若由auto-placement决定（比如没设grid-column-start），实际位置可能因兄弟元素顺序变化而偏移
为什么 grid-area 不能随便和 grid-template-areas 一起用
grid-area 是四值简写（row-start / column-start / row-end / column-end），但它遇到同名标识符时，会优先查 grid-template-areas 是否定义该区域；查不到就尝试解析为四值——这时只要拼错名字或漏引号，整条规则就静默失效。
立即学习“前端免费学习笔记（深入）”；
- 写了
grid-template-areas: "header main";，子元素再设grid-area: header;✅ 有效 - 写了
grid-template-areas: "header main";，子元素却写grid-area: "header";❌ 引号多余 →Invalid property value - 写了
grid-template-areas: "head main";，子元素写grid-area: header;❌ 名字不匹配 → 元素被丢进隐式网格，位置不可控 - 如果只是想精确定位，别用区域名，直接写四值：
grid-area: 1 / 1 / 2 / 3;，它不查grid-template-areas，也永不歧义
真正难的不是语法本身，是混合使用时的优先级和静默失败机制——grid-template 一行写错，整个网格骨架就塌；grid-area 名字差一个字符，元素就消失在网格外。调试时得盯着 Computed 面板看最终生效的是哪一组值，而不是只信源码里写了什么。
