subgrid生效需同时满足四条件：父容器显式定义grid-template-rows/columns、子元素为直接子项、自身display: grid、且声明grid-template-rows/columns: subgrid；缺一不可。
subgrid 不会自动继承外层轨道，必须同时满足四个硬性条件：父容器显式定义 grid-template-rows 或 grid-template-columns、子元素是父网格的直接子项、子元素自身设 display: grid、且显式声明 grid-template-rows: subgrid 或 grid-template-columns: subgrid。缺一不可。
父容器没写显式轨道，subgrid 就是摆设
很多人写了 grid-template-columns: subgrid 却没效果，根源在父容器只用了 grid-auto-columns、repeat(auto-fit, ...) 或 gap，这些生成的是隐式轨道，subgrid 不继承。
- ✅ 正确：父容器必须有类似
grid-template-columns: 1fr 2fr 1fr或grid-template-rows: 40px 1fr auto的明确声明 - ❌ 错误：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))—— 没有固定列数，subgrid 退化为none - ⚠️ 注意：
grid-auto-rows: 100px不等于grid-template-rows，它不提供可继承的轨道线
子元素不是直接子项，subgrid 完全失效
subgrid 只对父网格的**真实直接子元素**生效。中间插一层 display: contents、flex 或普通 div，子网格就断联了。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ❌ 无效结构：
<div class="parent-grid"><div style="display: contents"><div class="child-grid"></div></div></div>——.child-grid已不是直接子项 - ✅ 正确做法：删掉中间 wrapper，让
.child-grid直接挂到.parent-grid下，并用grid-column: 1 / -1或grid-row: 2 / 4显式声明占位范围 - ⚠️ 常见误判：以为加了
grid-column就等于“接入网格”，其实那只是定位指令，不改变 DOM 层级关系
混用 subgrid 和具体尺寸值，整条声明被浏览器忽略
你不能在同一个 grid-template-columns 或 grid-template-rows 声明里，既写 subgrid 又写像素/fr/百分比值。CSS 解析器会直接丢弃整条规则。
- ❌ 无效：
grid-template-columns: subgrid 1fr、grid-template-rows: subgrid 50px - ✅ 正确：要么全
subgrid（如grid-template-columns: subgrid），要么完全自定义（如grid-template-columns: 1fr 2fr 1fr） - ? 折中方案：只继承一个方向，比如
grid-template-columns: subgrid，再单独写grid-template-rows: auto 1fr auto控制行
浏览器支持和降级必须手动处理
Chrome 117+、Edge 117+、Safari 16.4+ 支持 subgrid，Firefox 仍需手动开启实验标志；更麻烦的是，旧版 Safari 或某些 WebView 遇到 subgrid 会静默失败，不报错也不渲染，布局就悄悄错位了。
- ⚠️
@supports (grid-template-columns: subgrid)不可靠：Safari 16.3 返回false，但 16.4 才真正可用；部分安卓 WebView 声称支持却行为异常 - ✅ 推荐降级写法：先写 fallback（如
grid-column: span 3），再用@supports包裹 subgrid 规则覆盖 - ? DevTools 显示有误导性：Chrome 有时显示 subgrid “已启用”，但实际未生效，建议用
getComputedStyle(el).gridTemplateColumns在控制台验证返回值是否真为"subgrid"
真正容易被忽略的点是：subgrid 不解决“子容器自己怎么摆”，它只解决“子容器内部的孙子元素怎么对齐到外层轨道”。如果你连 .child-grid 在父网格里都没居中、没占满、没设高度，subgrid 再准也没用——先确保它自己是个合格的网格项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
