CSS的grid-template-areas在Safari中不生效该如何办？

删掉 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 表示最后一根隐式线：

1. grid-area: header → grid-row: 1; grid-column: 1 / -1;
2. grid-area: main → grid-row: 2; grid-column: 2;（假设三栏布局，nav 在 col 1，main 在 col 2，aside 在 col 3）
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。必须同步重写所有子元素的定位规则：

1. 移动端从三栏 "nav main aside" 切到单列，对应每个子元素都要单独设 grid-row: 1 / 2;、grid-row: 2 / 3; 等
2. 如果某区域在断点中被隐藏（如侧边栏），不要留空 grid-area，应设为 auto 或配合 display: none
3. gap 写法也要统一：旧 Safari 不支持 row-gap/column-gap 单独声明，必须写成 gap: 12px 16px;

真机调试前必查的三项

即使代码看起来没问题，旧 Safari 仍可能失效：

1. 父容器是否真的用了 display: grid？检查 DevTools 的 Computed 面板，不是看 Styles，因为 display: contents 或 float 会干扰上下文
2. 运行 getComputedStyle(container).gridTemplateAreas，返回 "none" 就说明已被丢弃，别再调格式了
3. 加 outline: 1px solid red 到子元素上，确认 outline 是否贴着预期网格线；如果不贴，说明定位根本没生效，问题不在区域名匹配

最麻烦的不是写错，而是你以为它“部分生效”——其实只要有一处不合法，整条 grid-template-areas 就蒸发了，连带所有依赖它的 grid-area 都失效。显式行列定位虽然啰嗦，但每一步都可验证、可打断点、可真机复现。