subgrid列宽不对齐的根本原因是父容器未显式定义grid-template-columns轨道。父容器必须用1fr、repeat(3,1fr)等明确值定义列，禁用auto-fit等隐式生成方式，且子元素须为直接子项、复用父级命名线、响应式由父层统一控制。

写了 grid-template-columns: subgrid 却发现列宽还是不对齐？不是语法写错了，而是父容器根本没提供可继承的列轨道——Subgrid 不会“猜”列宽，它只认明确定义的 grid-template-columns 值。

父容器必须显式定义列轨道，不能靠 auto-fit 或 auto-rows

Subgrid 不继承隐式生成的列，比如 repeat(auto-fit, minmax(300px, 1fr))) 看似合理，但浏览器解析后 grid-template-columns 计算值为 none，子元素的 subgrid 就直接被丢弃。

• ✅ 有效写法：grid-template-columns: 1fr 2fr 1fr、grid-template-columns: [start] 200px [main] 1fr [end]、grid-template-columns: repeat(3, 1fr)
• ❌ 无效写法：grid-auto-columns: 1fr、gap: 1rem 单独存在、grid-template-columns: repeat(auto-fit, ...)
• 验证方式：Chrome DevTools → Layout 面板 → 勾选 “Show line names”，看到实线列名才表示轨道已就绪

子元素必须是父网格的直接子项，且声明 grid-column 范围

中间插一层 div、fieldset，甚至用 display: contents 包裹，都会让子元素失去“直接子项”身份，Subgrid 继承链当场中断。

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

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

下载

• ✅ 正确结构：<div class="grid-parent"><div class="subgrid-child"></div></div>，且 .subgrid-child 设 grid-column: 1 / -1 或明确跨列（如 grid-column: 2 / 4）
• ❌ 错误结构：<div class="grid-parent"><div class="wrapper"><div class="subgrid-child"></div></div></div> —— 无论 .wrapper 是否设 display: contents，都失效
• 漏掉 grid-column 声明会导致子网格默认只占单列，内部元素用 grid-column: 2 会锚定到错误位置，而非父级第 2 列

命名线必须复用父级定义，不能重声明同名轨道

父容器用了 grid-template-columns: [label] 150px [input] 1fr [hint] 200px，子元素想对齐，就得直接消费这些名字；自己再写 [label] 会触发整条声明被忽略。

• ✅ 正确用法：.subgrid-child > label { grid-column: label; }、.subgrid-child > input { grid-column: input; }
• ❌ 静默失败：.subgrid-child { grid-template-columns: [label] subgrid; } —— 浏览器直接丢弃该声明
• 子元素若需局部调整列行为（如某字段合并两列），只能在自身子项上用 grid-column: span 2，不能动父级命名线

响应式切换必须由父容器驱动，子层禁用 media query

Subgrid 本身不响应，它只是父网格轨道的镜像。一旦子元素自己写 @media 改 grid-template-columns，就等于主动退出继承模式。

• ✅ 正确做法：所有断点逻辑集中在父容器，例如 @media (max-width: 768px) { .grid-parent { grid-template-columns: 1fr; } }，子层保持 grid-template-columns: subgrid 不变
• ❌ 错误做法：.subgrid-child { @media (max-width: 768px) { grid-template-columns: 1fr 1fr; } } —— computed 样式中该属性变为 none
• 移动端常需隐藏某些字段（如 .hint），用 display: none，避免留空行破坏父级行轨道稳定性

真正卡住的往往不是那一行 subgrid 声明，而是父容器轨道是否“干净”、DOM 是否多了一层看不见的包装、开发者工具里 computed 值是不是真的显示为 subgrid 而非 none——哪怕一个空格或换行符，在 display: contents 场景下也可能成为断链点。

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