最稳妥的方式是直接用 grid-column 和 grid-row 控制跨列跨行，grid-template-areas 仅适用于整体结构固定、命名区域明确的顶层布局；混用易因格式错位导致声明失效。
直接用 grid-column 和 grid-row 控制跨列跨行最稳妥，grid-template-areas 适合整体结构固定、命名区域明确的布局，混用时容易因格式错位导致整条声明失效。
grid-column / grid-row 跨列跨行的写法与常见错误
这两个属性是显式控制单个元素跨越范围的核心手段，语法灵活但线号和 span 的组合容易出错。
-
grid-column: 2 / span 3表示从第 2 条列网格线开始，向右跨 3 个轨道（即占 3 列），不是“从第 2 列到第 3 列” -
grid-row: -2 / -1是合法的，表示倒数第二行线到末行线，但grid-row: -1 / -2会无效（起始线不能在结束线之后） - 若容器未定义
grid-template-rows，grid-row: 2 / 4可能无法预期生效——浏览器按自动行高生成轨道，第 2、4 条线未必存在 - 避免写
grid-column: 1 / 3同时又给子元素设width: 100%：后者会干扰网格项尺寸计算，尤其在fr单位下易撑破布局
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"是非法字符串拼接，会被截断为仅"header header"
什么时候该放弃 grid-template-areas，改用 grid-column/grid-row？
当布局存在动态内容、响应式断点变化、或需要局部微调时，grid-template-areas 的字符串方式反而成为负担。
立即学习“前端免费学习笔记（深入）”；
- 卡片列表中某张“推荐卡”需始终占满前两列，但总列数随屏幕宽度从 2 → 3 → 4 变化——用
grid-column: 1 / span 2比在每个断点重写grid-template-areas更轻量 - 表单里一个
textarea需跨 3 行，但下方按钮位置不固定——grid-row: span 3可配合自动流，而grid-template-areas要求你提前规划好所有行高 - 金融报表中多级表头需冻结中间列，
position: sticky与grid-area命名区域不兼容，必须用grid-column显式锚定列范围
真正难的不是写对某一行声明，而是保持所有网格线编号、span 数值、字符串行列对齐之间的一致性——只要其中一处偏移，视觉错位就很难靠肉眼定位。建议在复杂布局中优先用 grid-column/grid-row 手动控制，把 grid-template-areas 留给顶层框架级划分。
