旧版 Safari（iOS 15.3 及更早、macOS Monterey 12.3 之前）对 CSS Grid 存在硬性解析缺陷，部分语法被静默忽略，导致布局崩坏；必须手动添加 -webkit- 前缀、显式线定位并搭配降级方案，不能依赖 autoprefixer 或 @supports。
旧版 Safari（iOS 15.3 及更早、macOS Monterey 12.3 之前）对 CSS Grid 的支持存在硬性断层：部分语法被静默忽略，不是“效果不好”，而是整条声明压根不解析，布局直接崩坏。必须用显式线定位 + 前缀 + 降级组合拳，不能只靠 autoprefixer 或 @supports。
为什么 Safari 开发者工具里 display: grid 显示为 block
这不是代码写错了，是 Safari 内核根本没加载 Grid 解析器。常见触发点：
- 用了
grid-template-areas—— Safari ≤15.3 完全不识别，整条display: grid规则被丢弃，回退成display: block - 写了
row-gap或column-gap—— 这些属性在 Safari ≤15.3 中无效，但不会报错，只是间隙消失，子项紧贴错位 - 父容器只写了
display: grid却没定义grid-template-columns—— Safari 可能按 auto 撑开轨道，导致列宽异常或高度塌陷
验证方式：打开 Safari 开发者工具 → Computed 面板 → 搜 display，若值不是 grid；再搜 grid-template-columns，若显示 none 或空字符串，基本锁定是旧内核问题。
必须手写 -webkit- 前缀且顺序不能错
autoprefixer 默认不为 Safari 10.1–15.3 补足 Grid 前缀，尤其漏掉 -webkit-grid-gap 和 -webkit-grid。仅靠 Tailwind 类或现代写法会失效。
-
display必须双写：display: -webkit-grid在前，display: grid在后 -
grid-gap不生效，改用-webkit-grid-gap: 12px+gap: 12px（注意 Safari ≤15.3 只认合写gap，不认分开的row-gap） -
grid-column/grid-row在 Safari 10.1+ 可用，但需避免混用grid-template-areas—— 同一规则里只要出现后者，整条样式会被跳过 -
minmax()、fr单位在 Safari ≤10.1 中表现不稳定，建议用px或%替代
用数字线定位替代 grid-template-areas
grid-template-areas 是旧 Safari 最大雷区，删掉它是最简单有效的修复起点。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- header 跨整行 →
grid-column: 1 / -1; grid-row: 1; - nav 在第二行第一列 →
grid-column: 1; grid-row: 2; - main 在第二行第二列 →
grid-column: 2; grid-row: 2; - footer 跨整行第三行 →
grid-column: 1 / -1; grid-row: 3;
关键点：-1 表示隐式最后一根线，所有支持 Grid 的旧内核都认；同时父容器必须显式定义 grid-template-columns: 200px 1fr 和 grid-template-rows: 60px auto 40px，否则 Safari 可能按内容撑开导致错位。
@supports 检测不可信，fallback 必须手动对齐
@supports (display: grid) 会把 Safari 10.1 放进来，但它不支持 gap 和 subgrid；@supports (gap: 1rem) 又会把 Firefox 63 以前版本误判为不支持。最稳写法是：
@supports (display: grid) and (grid-template-columns: 1fr) {
.grid { display: -webkit-grid; display: grid; }
.grid > * { -webkit-grid-column: 1; grid-column: 1; }
/* 所有 Grid 样式放这里 */
}
/* fallback 写在外面，用 float 或 inline-block，别用 flex —— Safari 12–14 对 flex-wrap 支持不稳 */
.grid { margin: 0; }
.grid > * { float: left; width: 50%; }
真正麻烦的是 subgrid 或 auto-fit 降级：父容器用 grid-template-rows: 40px 1fr 60px，子元素在不支持浏览器里不能靠 JS 推导，必须手动写死 grid-row: 1 / 4。轨道数不对齐，布局就断开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
