grid-template-areas 是最可控、语义最清晰的不规则布局方案，因其将布局结构可视化、避免线号偏移风险，而 grid-column/grid-row 仅适用于跨行跨列或动态项定位。
直接用 grid-template-areas 配合 grid-area 是最可控、语义最清晰的不规则布局方案；靠 grid-column/grid-row 手动定位容易漏线号、错位难调试，只适合少量动态项。
为什么命名区域（grid-template-areas）比线号定位更稳
命名区域把布局结构“画”在 CSS 里，人眼可读、编辑直观、改起来不牵连；而线号定位依赖隐式或显式网格线编号，一旦增删某一行/列定义，所有后续项的 grid-row 和 grid-column 都可能偏移一格，尤其在嵌套或响应式场景下极易出错。
-
grid-template-areas值必须是字符串矩阵，每行用引号包裹，空格分隔区域名，换行用单引号续写（如"a a b" "a a c" "d e f"） - 每个区域名只能对应一个网格项，重复使用会自动合并成一块连续区域
- 区域名不能含空格或特殊字符，推荐用小写字母或短横线（如
hero、sidebar） - 未被引用的区域名（比如写了
"a b c"但没元素设grid-area: b）会留空，不影响渲染
grid-column 和 grid-row 什么时候必须用
当网格项需要跨多行/列、或位置随数据动态变化（比如后台返回的卡片类型不同），硬编码区域名就不现实了，这时得靠线号控制。
- 用
grid-column: 2 / -1表示从第 2 条列线开始，到最后一列线结束（即占满右侧所有列） -
grid-row: span 3比grid-row: 1 / 4更安全——后者依赖起始行号准确，前者只关心跨度 - 避免写死负数线号（如
-2），旧版 Safari 对负索引支持不稳定；优先用span或显式定义grid-template-rows - 如果容器用了
grid-auto-flow: column，grid-row的行为会反直觉（项按列填，行号不连续），此时务必加grid-row: auto重置
响应式不规则布局怎么不崩
别在媒体查询里反复重写 grid-template-areas —— 它不支持部分覆盖，一换就全丢。真正可行的是：用同一套区域名，在不同断点下调整 grid-template-columns 和 grid-template-rows，让相同区域名“适配”不同轨道尺寸。
立即学习“前端免费学习笔记（深入）”；
- 小屏（
max-width: 768px）设grid-template-columns: 1fr，所有区域垂直堆叠 - 中屏设
grid-template-columns: 2fr 1fr，让main区域变宽，sidebar变窄，区域名不变 - 大屏可加
grid-template-rows: 80px auto 60px显式控制头/身/尾高度，避免内容撑开错位 - 绝对不要对
grid-area做媒体查询切换——它不是响应式属性，改了等于重新布局，JS 注入时易冲突
容易被忽略的兼容性雷区
Firefox 和 Chrome 对 grid-template-areas 的语法容错高，但 Safari（尤其是 iOS 15.6 之前）会因一个多余空格或换行符直接忽略整条声明；subgrid 目前仍无 Safari 支持，别指望用它做深层不规则嵌套。
- 检查
grid-template-areas是否被浏览器静默丢弃：打开 DevTools → Elements → 选中容器 → 查看 Computed 样式里有没有grid-template-areas计算值 - 旧版 Safari（gap，必须加回退
grid-gap: 12px（虽然已废弃，但兼容性实测有效） -
aspect-ratio在 Safari 15.4+ 才稳定，做图片不规则网格时，若需等比缩放，优先用padding-top+position: absolute回退方案 - 所有区域名必须在
grid-template-areas字符串里完整出现一次，哪怕只是占位（如"a . b"中的.表示空单元格），否则 Safari 渲染异常
