删掉 grid-template-areas 改用 grid-row 和 grid-column 显式定位，是 safari ≤15.3 中唯一稳定方案，因其会静默丢弃整条 grid-template-areas 声明，导致布局退化为流式。
直接删掉 grid-template-areas，改用 grid-row 和 grid-column 显式定位——这是 Safari ≤15.3（含 iOS 15.3 及更早）中唯一稳定生效的方案。
为什么删掉是第一反应，而不是修语法？
旧版 Safari 不是“解析错”，而是整条 grid-template-areas 声明被静默丢弃。你看到布局塌成一列流式，不是 bug，是浏览器压根没读那行 CSS。DevTools 里该属性会显示为灰色划掉，控制台却无任何提示。哪怕只多一个空格、少一个引号、区域名带连字符（如 "header-nav"），整条规则就作废。Autoprefixer 无法降级，@supports (grid-template-areas: ...) 在 Safari 里也返回 true 却不执行——它根本不可靠。
怎么用 grid-row / grid-column 替代？
把区域名映射转成行列线编号，从 1 开始数，终点可用 -1 表示最后一根隐式线：
-
grid-area: header→grid-row: 1; grid-column: 1 / -1; -
grid-area: main→grid-row: 2; grid-column: 2;（假设三栏布局，nav 在 col 1，main 在 col 2，aside 在 col 3） -
grid-area: footer→grid-row: 3; grid-column: 1 / -1;
避免用 span 语法（如 grid-row: span 2），Safari 10–14 对它的 fallback 行为不稳定；也别用负值终点（如 grid-column: 2 / -2），IE11 和旧 Safari 不识别，得手动算总列数写死。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
响应式切换时容易踩的坑
媒体查询里不能只改 grid-template-areas 字符串——旧 Safari 根本不认，子元素又没配 grid-row/grid-column，结果整个网格退化为 display: block。必须同步重写所有子元素的定位规则：
- 移动端从三栏
"nav main aside"切到单列，对应每个子元素都要单独设grid-row: 1 / 2;、grid-row: 2 / 3;等 - 如果某区域在断点中被隐藏（如侧边栏），不要留空
grid-area，应设为auto或配合display: none -
gap写法也要统一：旧 Safari 不支持row-gap/column-gap单独声明，必须写成gap: 12px 16px;
真机调试前必查的三项
即使代码看起来没问题，旧 Safari 仍可能失效：
- 父容器是否真的用了
display: grid？检查 DevTools 的 Computed 面板，不是看 Styles，因为display: contents或float会干扰上下文 - 运行
getComputedStyle(container).gridTemplateAreas，返回"none"就说明已被丢弃，别再调格式了 - 加
outline: 1px solid red到子元素上，确认 outline 是否贴着预期网格线；如果不贴，说明定位根本没生效，问题不在区域名匹配
最麻烦的不是写错，而是你以为它“部分生效”——其实只要有一处不合法，整条 grid-template-areas 就蒸发了，连带所有依赖它的 grid-area 都失效。显式行列定位虽然啰嗦，但每一步都可验证、可打断点、可真机复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
