子菜单未对齐父级网格列线，最常见原因是仅设display: grid却漏写grid-template-columns: subgrid或grid-template-rows: subgrid；父容器必须明确定义grid-template-columns（不能仅用auto-fit或grid-auto-columns），且中间层需同为subgrid、禁用gap等干扰项以保持轨道连续性。
为什么子菜单没对齐父级网格的列线？
最常见原因是只写了 display: grid，却漏掉关键声明：grid-template-columns: subgrid 或 grid-template-rows: subgrid。Subgrid 不是 display 的衍生行为，它必须在对应维度上单独启用。
- 父容器未定义
grid-template-columns（比如只用grid-auto-columns或repeat(auto-fit, ...)），子元素设subgrid就无效 - 父用了
gap，而子又没用grid-column: span N覆盖完整跨度，会插入隐式轨道，破坏对齐基线 - 子元素写了已废弃的
display: subgrid—— 现代标准只认display: grid+grid-template-*为 subgrid
三层菜单嵌套时如何让图标和文字对齐顶层列线？
Subgrid 只作用于直接子元素，孙子层默认对齐的是中间层轨道，不是顶层。想穿透对齐，中间层必须也是 subgrid，且不能引入任何额外轨道。
- 中间层（如
.menu-group）必须同时声明grid-template-columns: subgrid和grid-template-rows: subgrid，不能只写一边 - 中间层禁止使用
gap、grid-auto-rows或空<div></div>—— 它们会生成隐式轨道，切断轨道映射链 - 中间层若设了
grid-column: span 2，会导致其子元素的列索引整体偏移，顶层命名线（如[icon]）无法被正确锚定
响应式菜单中 Subgrid 为何在断点后错位？
Subgrid 继承依赖父容器的轨道定义稳定。一旦媒体查询在子元素上重写 grid-template-columns，继承就中断；若父容器在断点里用 repeat(auto-fit) 替换显式列定义，subgrid 也会 fallback 成 none。
- ✅ 正确做法：只在父容器（如
.main-menu）上做响应式轨道调整，例如@media (min-width: 768px) { grid-template-columns: 1fr 2fr 1fr; } - ❌ 错误做法：在子菜单（如
.submenu）里加@media (min-width: 768px) { grid-template-columns: 1fr 1fr; }，这等于主动放弃继承 - ⚠️ 注意：Chrome/Firefox 的 Grid Inspector 中勾选 “Show line names”，能立刻确认命名线是否来自顶层容器
菜单项内图标+文字底部对齐为何仍错位？
跨卡片底部对齐的关键不是靠 align-self: end 或 margin-top: auto，而是让所有菜单项共享同一套行轨道 —— 这正是 grid-template-rows: subgrid 解决的核心问题。
- 父菜单容器需明确定义行轨道，例如
grid-template-rows: auto minmax(40px, 1fr) auto（头/内容/操作区） - 每个
.menu-item设grid-template-rows: subgrid，不定义新行 - 图标和文字分别用
grid-row: 2、grid-row: 3直接锚定父轨道线，而非内部推挤 - 若某项内容过长触发了
minmax()的弹性行为，其他项会自动跟随拉伸，保持物理对齐
subgrid，而是维护轨道连续性——gap、空元素、媒体查询覆盖、隐式轨道，任何一个都可能让整条对齐链断裂。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
