subgrid继承父网格显式轨道而非盒模型尺寸，需父容器明确定义grid-template-columns/rows、子元素为直接子项且声明grid-template-columns: subgrid及grid-column等定位；混用subgrid与具体尺寸值会导致整条规则失效。

subgrid 不继承盒模型尺寸，它继承的是父网格的轨道（track）定义——即列宽/行高的计算逻辑，而非最终渲染像素值。 这一点常被误解为“自动同步宽度”，实际是轨道结构复用，尺寸仍由内容、约束和父级显式声明共同决定。

为什么写了 grid-template-columns: subgrid 却没对齐父列？

最常见原因是父容器没提供可继承的显式轨道。subgrid 只能绑定到 grid-template-columns 或 grid-template-rows 中明确定义的轨道，不认 grid-auto-columns、repeat(auto-fit, ...) 或仅靠 gap 推导出的隐式轨道。

• ✅ 有效父声明：grid-template-columns: 1fr 2fr 1fr 或 grid-template-columns: 200px 1fr auto
• ❌ 无效父声明：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))、grid-auto-columns: 1fr、gap: 1rem 单独存在
• 子元素必须是父网格的直接 DOM 子节点，中间插 display: contents、flex 容器或 wrapper div 都会断开轨道映射

grid-column: span 2 为什么是必需的？

subgrid 自身不决定占位范围；它只接管轨道尺寸。若不显式用 grid-column 或 grid-row 指定子元素在父网格中的位置，浏览器会按默认 grid-column: auto 分配——通常只占 1 列，导致后续列错位、轨道链断裂。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父有 3 列 → 子要跨满，写 grid-column: 1 / -1 或 grid-column: span 3
• 若只写 grid-template-columns: subgrid 而漏掉 grid-column，子网格退化为单列普通 grid，视觉上可能“看起来差不多”，但 computed 样式里 grid-template-columns 已变成 none
• Chrome/Firefox DevTools 的 Grid 面板中勾选 “Show line names”，若显示的是父层定义的线名（如 1 / 2），说明 subgrid 生效；若显示子层自定义名或空白，说明未绑定

混用 subgrid 和具体尺寸值会静默失效

CSS 解析器对 grid-template-columns 声明是全有或全无：只要其中包含 subgrid 关键字，整条规则就不能再混入任何长度值（如 1fr、200px），否则整条规则被丢弃，回退到 none。

• ❌ 错误：grid-template-columns: subgrid 1fr、grid-template-columns: subgrid auto
• ✅ 正确：grid-template-columns: subgrid（全继承） 或 grid-template-columns: 1fr 2fr 1fr（全重写）
• 折中方案：只继承一个方向，比如 grid-template-columns: subgrid，再单独设 grid-template-rows: 100px auto 1fr —— 行列可独立控制

真正容易被忽略的是：subgrid 生效后，子网格内元素的对齐依赖于父轨道的稳定性。如果父级用 minmax() 或响应式 auto-fit 动态生成列数，子层的 subgrid 就无法可靠映射——它需要父轨道在布局计算时已确定数量与顺序，而不是运行时推导。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！