Safari 17.4+ 支持 subgrid 但对父列定义极其苛刻：仅识别字面量（如 120px 1fr），遇 repeat(auto-fit, ...) 或 minmax(auto, 1fr) 则静默失效，getComputedStyle 返回空字符串，需用 JS 实时检测 gridTemplateColumns === 'subgrid' 并配合 CSS 变量 + 孙子层显式定位降级。
grid-column: subgrid 在 Safari 17 中能解析、不报错，但实际对齐常失效——根本原因不是“不支持”，而是它严格依赖父容器的 grid-template-columns 必须显式写出、且不能含 repeat(auto-fit, ...) 或 minmax() 等动态函数；一旦父列定义被 Safari 内核推导而非硬编码，subgrid 就退化为 grid-column: auto。
为什么 Safari 17.4+ 的 subgrid 看似启用却不对齐
Safari 17.4 是首个原生支持 subgrid 的版本，但它对“可继承轨道”的判定比 Chrome/Firefox 更苛刻：它只认字面量列定义（如 120px 1fr 80px），遇到 repeat(3, 1fr) 会降级处理，repeat(auto-fit, minmax(200px, 1fr))) 则直接跳过整条声明，getComputedStyle(el).gridTemplateColumns 返回空字符串而非 "subgrid"。
- 用
DevTools → Computed → grid-template-columns查值，若为空或"none"，说明轨道未被识别，subgrid实际未生效 - 父容器若用
grid-auto-columns: 1fr替代grid-template-columns，Safari 17 会彻底忽略子元素的grid-column: subgrid -
minmax()在 Safari 17.4–17.6 中仅部分支持：minmax(100px, 200px)可行，但minmax(auto, 1fr)会被静默转为auto，导致列宽塌缩
为什么 grid-template-columns: subgrid 在 Safari 17 中基本不可用
这个写法要求子元素自身是网格容器，并复用父列轨道——但 Safari 17 对该语法的实现存在逻辑断层：它允许解析该声明，却不把父容器的列定义注入子容器的布局上下文。结果是子容器渲染时仍按 grid-template-columns: none 处理，所有直系子代退化为块流。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须改用
grid-column: subgrid（作用于孙子层），这是 Safari 17 唯一稳定路径 - 子元素（即“中间层”）必须先通过
grid-column: 1 / -1显式成为父网格项，否则subgrid无依附目标 - 禁用
display: contents：Safari 17 下它会让子元素脱离网格树，subgrid失效概率接近 100%
如何验证 subgrid 是否真在 Safari 17 中起效
别信 @supports (grid-template-columns: subgrid)——Safari 17.4+ 会返回 true，但实际布局仍错乱。真实检测只能靠运行时 JS 和 DevTools 双验证：
- 执行
getComputedStyle(el).gridTemplateColumns === "subgrid"，返回false或空字符串即未启用 - DevTools Layout 面板勾选 “Grid overlay”，观察孙子元素 outline 是否严格贴合父网格线；若 outline 溢出或居中，说明
subgrid未接管列轨道 - 检查父容器是否设置了
overflow: hidden：Safari 17.5 中该属性会干扰subgrid的尺寸计算，导致列宽压缩
真正麻烦的不是“Safari 17 不支持 subgrid”，而是它支持得“半截子”：语法能过，轨道继承却断在中间。所以 fallback 不能只覆盖旧浏览器，Safari 17.x 用户也得进降级路径——用 CSS 变量统一列定义 + 孙子层显式 grid-column 定位，是最省心的兜底方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
