最常见原因是父容器未显式定义grid-template-columns；必须写固定列数如240px或repeat(3,1fr)，且子元素须为父网格直接子项，中间不得插入包裹层，各层均需显式设display: grid。
父容器没显式定义 grid-template-columns
嵌套后列线断开，最常见原因是外层容器只写了 display: grid 和 gap，却没写 grid-template-columns。浏览器不会把 grid-auto-columns 或 repeat(auto-fit, minmax(...)) 当作“可继承轨道”——这些生成的是隐式轨道，subgrid 直接无视，grid-column 也失去锚点。
检查开发者工具的 computed 样式：grid-template-columns 解析为 none，说明整条声明被丢弃。必须写成类似：
grid-template-columns: 240px 240px 240px;
或
grid-template-columns: repeat(3, 1fr);
——显式、固定列数、无 auto / minmax 动态计算。
立即学习“前端免费学习笔记（深入）”；
子网格不是父网格的直接子元素
grid-column 和 subgrid 都要求子元素是父网格的**直接子项**。中间插一层 div、span，甚至用了 display: contents 包裹，都会让 DOM 层级断裂，导致对齐失效。
-
<div class="parent"><div class="submenu"></div></div>✅ -
<div class="parent"><div class="wrapper"><div class="submenu"></div></div></div>❌（除非.wrapper也参与父网格布局，如设grid-column: 1 / -1）
别指望 JS 动态插入后自动重映射轨道——结构变了，就得手动确保新节点挂到正确父级下。
子元素没设 display: grid 就用 grid-column
grid-column 不是通用定位属性，它只在 display: grid 或 display: inline-grid 容器内生效。如果外层是 Grid，但子菜单本身只是 div 没设 display: grid，那 grid-column: 2 就是无效声明，元素会回退到普通文档流，堆在左上角。
多级菜单必须逐层显式声明：
-
.sidebar：设display: grid+grid-template-columns -
.submenu-wrapper（中间层）：也要display: grid，且禁用gap、grid-auto-rows -
.submenu（实际菜单）：同样display: grid，再写grid-column: 2
漏掉任何一层，对齐链就断了。
跨容器列线不共享，命名线更不可靠
你给 A 容器起名叫 col-start，B 容器里同名的 col-start 并不指向同一位置——每个网格容器的命名空间完全隔离。数字线号（如 grid-column: 2）能对齐的前提是：所有容器的 grid-template-columns 列数、顺序、单位严格一致。
推荐用 CSS 变量统一列定义：
:root { --cols: 240px 240px 240px; }<br>.list-a { grid-template-columns: var(--cols); }<br>.list-b { grid-template-columns: var(--cols); }
别依赖 grid-area 名称跨容器对齐，也别混用 subgrid 和显式列轨道——前者要求全链路干净无干扰，后者更可控、兼容性更好。
真正容易被忽略的，是中间层那个看似无害的 gap：它会触发隐式轨道生成，直接切断 subgrid 继承链。删掉它，比调样式优先级更管用。
