grid-template三段式语法必须严格按「区域定义 行定义 / 列定义」顺序书写，缺一不可；引号为必需语法，点号占位未用单元格，Firefox对换行更敏感，斜杠/是关键锚点。
grid-template三段式语法顺序错了就全失效
浏览器解析grid-template时，不是“能认出哪部分是行、哪部分是列”，而是严格按「区域定义 行定义 / 列定义」顺序匹配。一旦顺序错乱，整条声明被静默丢弃，DevTools 里该属性会显示为划掉的灰色——你看到布局崩了，但控制台不报错。
常见错误写法：
-
grid-template: 80px "header header" / 1fr 200px→ 行高写在区域名前面，无效 -
grid-template: "header header" 1fr / 80px 200px→ 把行定义（1fr）误当行高，实际应是行轨道尺寸，而80px是列宽，位置反了 -
grid-template: "header header" / 1fr 200px→ 缺区域定义的第二段（即没写行轨道值），但写了区域字符串，语法不完整
区域名字符串必须用统一引号包裹，且不能漏点号占位
引号不是可选装饰，是语法必需：区域名含短横线（如user-info）、空格或纯数字时，不加引号会被当作减法或非法标识符；混用单双引号（如'header' "main"）也会导致整条声明失效。
字符串网格还要求格式严丝合缝：
立即学习“前端免费学习笔记（深入）”；
- 每行单词数必须一致，比如第一行
"a b c"是三列，第二行就得写"d e f"或"d e ."，不能只写"d e" - 未使用的单元格必须用英文点号
.占位，写成空字符串""、空格、或直接跳过，都会让声明无效 - 换行不能脱离引号：
"header header" "main sidebar"不是合法 CSS 字符串，必须写成"header header" "main sidebar"（同一对引号内换行）或单行
只写区域字符串却不定义行列尺寸，等于没写
grid-template: "a b" "c d"这种写法看起来简洁，但浏览器不会自动推导出行高列宽——它只设置了grid-template-areas，而grid-template-rows和grid-template-columns仍为none，结果就是网格容器退化为普通块级元素，子项按文档流排列。
正确做法是补全三段：
-
grid-template: "a b" "c d" / 100px 1fr→ 两行高分别为100px和自动，两列宽为100px和1fr - 如果不想手动设尺寸，改用
grid-template-areas+grid-template-columns/grid-template-rows分写，更安全也更易调试
Firefox 对换行和空格比 Chrome 更敏感
Chrome 和 Safari 会忽略grid-template字符串中的换行符和多余空格，但 Firefox 会把换行当普通空白处理，导致grid-template-areas解析失败。例如：
错误（Firefox 下失效）：
grid-template-areas: "header header" "main sidebar";
正确（所有浏览器兼容）：
grid-template-areas: "header header" "main sidebar";
这不是书写习惯问题，是渲染引擎实现差异。线上项目若需兼容 Firefox，务必写成单行，别依赖编辑器自动换行或模板字面量拼接。
最常被忽略的一点：三段式语法里，区域名字符串和行列定义之间不能插任何其他值，也不能省略斜杠/——它不是分隔符，而是语法锚点。少一个/，或者多一个空格在/前后，都可能让整条声明归零。
