@supports (grid-template-columns: subgrid)不可靠，因Firefox 111–113存在bug会误报true，Chrome 114前和Safari 17.4前则完全不解析该语法致整个@supports块被忽略；真实启用状态须用JS验证getComputedStyle(el).gridTemplateColumns是否等于'subgrid'。
Subgrid 降级不能靠 @supports 自动 fallback，必须手动复制轨道 + 显式定位，否则孙子元素直接退化成块流，布局断裂。
为什么 @supports (grid-template-columns: subgrid) 不可靠
@supports 检测在 Firefox 111–113 中存在已知 bug：即使 layout.css.grid-2 被禁用，也会错误返回 true；Chrome 114 之前、Safari 17.4 之前压根不解析该语法，整个 @supports 块被忽略，降级样式根本不会加载。真实启用状态只能靠 JS 验证：getComputedStyle(el).gridTemplateColumns === 'subgrid' —— 返回空字符串或 none 就说明没生效。
优先用 grid-column: subgrid 而非 grid-template-columns: subgrid
grid-template-columns: subgrid 要求子元素自身是网格容器，且父容器必须显式定义列轨道（不能靠 grid-auto-columns 或 repeat(auto-fit, ...) 推导）；而 grid-column: subgrid 只要求子元素是父网格的**直系网格项**（即已通过 grid-column 或 grid-area 定位），兼容性更好、生效条件更宽松。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- 父容器必须设
display: grid且显式写死grid-template-columns，例如grid-template-columns: 120px 1fr - 子元素先用
grid-column: 1 / -1占满整行，成为网格项 - 再对其直系子代（即孙子元素）设
grid-column: subgrid - 若中间层用了
display: contents，会切断网格上下文，subgrid彻底失效
手动 fallback 必须覆盖到孙子层级
不支持时，设了 grid-column: subgrid 的孙子元素会退化为块级流——所以降级不能只改父容器，必须让这些孙子元素也按相同轨道对齐。
立即学习“前端免费学习笔记（深入）”；
- 父容器外层写基础列定义：
.parent { grid-template-columns: 120px 1fr; } - 子元素（孙子的父级）不设
grid-template-columns，它不是网格容器；而是给每个孙子显式写grid-column: 1或grid-column: 2 - 若父列数动态（如
repeat(auto-fit, minmax(200px, 1fr)))），fallback 里必须转为固定列数，比如repeat(3, 1fr)，否则无法对齐 - 推荐用 CSS 变量统一列定义：
--form-cols: 120px 1fr;，父/孙子都引用grid-template-columns: var(--form-cols)和grid-column值
验证时别信 DevTools 的 computed 样式面板
打开 Chrome DevTools → Layout 面板 → 勾选 “Show line names” 和 “Grid overlay”，看孙子元素 outline 是否严格贴合父网格线；如果只是普通块状堆叠，说明 subgrid 没生效，且 fallback 也没覆盖到位——最常漏掉的是忘记给孙子元素加 display: grid 或显式 grid-column，它们在降级路径里不再是“自动继承”，而是要完全重写。
