Subgrid 是专为轨道对齐设计的继承机制，仅当父网格明确定义了 grid-template-rows/columns 且子元素为直接子项时生效；不继承隐式轨道，不可混用 subgrid 与具体尺寸值，不支持 display: contents 的伪子项，且需显式声明 grid-row/column 范围才能正确对齐。
Subgrid 不是“嵌套 Grid”的升级版，而是专为轨道对齐设计的继承机制——它只在父网格已明确定义了 grid-template-rows 或 grid-template-columns 时才生效，且子元素必须是父网格的直接子项。
subgrid 必须配合显式轨道定义才能工作
很多人写完 grid-template-columns: subgrid 却没效果，根本原因是父容器没定义列轨道，只用了 grid-auto-columns 或靠 auto-fit 动态生成隐式轨道。Subgrid 不继承隐式轨道。
- ✅ 正确：父容器写了
grid-template-columns: 1fr 2fr 1fr，子元素才能用grid-template-columns: subgrid - ❌ 错误：父容器只写
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，此时没有显式列数，subgrid会退化为none - ⚠️ 注意：
grid-template-rows: subgrid同理——如果父容器用grid-auto-rows: 100px而非显式grid-template-rows，子元素设subgrid无效
不能混用 subgrid 和具体尺寸值
你不能在同一个 grid-template-rows 或 grid-template-columns 声明里，既写 subgrid 又写像素或 fr 值。浏览器会直接忽略整条声明。
- ❌ 无效：
grid-template-rows: subgrid 50px、grid-template-columns: subgrid 1fr - ✅ 正确：要么全
subgrid（如grid-template-rows: subgrid），要么完全自定义（如grid-template-rows: auto 1fr auto） - ? 折中方案：若只需部分继承，可只继承一个方向（比如只设
grid-template-columns: subgrid），另一方向按需自定义行高
subgrid 不支持 display: contents 的“伪子项”
有人试图用 display: contents 把中间容器“透传”过去，让孙辈元素直接受父网格控制，再给这个“伪容器”加 subgrid ——这行不通。Subgrid 要求该元素本身是父网格的**真实网格项**，且自身是 display: grid 容器。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- ❌ 无效结构：
<div class="parent-grid"><div class="wrapper" style="display: contents"><div class="child-grid">...</div></div></div>——.child-grid已不是父网格的直接子项 - ✅ 可行替代：去掉中间 wrapper，让
.child-grid直接作为.parent-grid的子元素，并确保它有grid-column/grid-row范围声明（如grid-column: 1 / -1） - ⚠️ 兼容性提醒：Safari 16.4+、Firefox 110+、Chrome 114+ 支持；旧版 Safari（≤16.3）和 Edge 113– 仍不支持
subgrid，需用@supports (grid-template-columns: subgrid)包裹降级逻辑
常见对齐失效的真正原因：grid-row / grid-column 范围没写对
即使 subgrid 生效，子网格内的内容仍可能错位——问题往往出在没告诉子网格“它要跨几行几列”。Subgrid 继承轨道，但不自动决定占用范围。
- ❌ 错误写法：
.child-grid { display: grid; grid-template-columns: subgrid; }—— 没设grid-column，它默认只占 1 列，无法对齐多列父轨道 - ✅ 必须补全：
grid-column: 1 / -1（占满所有列）或grid-column: span 3（明确跨 3 列） - ? 实用技巧：用
grid-row: span N配合父容器的grid-template-rows行数，确保子网格高度覆盖对应轨道（例如父设了 4 行，子网格需grid-row: span 4才能完整继承）
Subgrid 的核心约束很朴素：它不创造轨道，只复用；不接管布局流，只提供对齐锚点。最容易被忽略的，其实是父容器那几行显式 grid-template-* 的声明——少了它，后面所有 subgrid 都只是 CSS 注释。
