垂直导航菜单用grid布局时子菜单错乱，根本原因是grid容器未设position:relative导致定位上下文错误；图标文字不对齐源于基线差异，需flex或vertical-align修复；子菜单动画须用max-height过渡而非grid属性；IE11兼容需双语法降级。
垂直导航菜单用 grid 布局时，子菜单弹出位置错乱
根本原因是 grid 容器的 overflow 或 place-items 干扰了子菜单的定位上下文。子菜单（.submenu）通常用 position: absolute，但它会相对于最近的「定位上下文」祖先计算位置——而 display: grid 本身不创建新定位上下文，除非该网格容器设置了 position: relative。
- 必须给导航项容器（比如
.nav-item）加position: relative，否则.submenu会往上冒到body或其他父级上 - 避免在网格容器上设
overflow: hidden，否则子菜单直接被裁掉 - 别用
place-items: center这类全局对齐，它会让所有子元素（包括.submenu）一起居中，破坏层级关系
grid-template-rows 固定行高导致图标和文字不对齐
图标（<svg></svg> 或 <i></i>）和文字默认基线不一致，强行用 grid-template-rows: 40px 40px 会放大错位感。这不是网格的问题，而是行内元素对齐逻辑没处理好。
- 把图标和文字都包进一个
span，并统一设display: flex; align-items: center; gap: 8px - 或者给图标加
vertical-align: middle，但注意svg需额外设height和vertical-align才稳定 - 不要依赖
grid-row-start调整单个导航项高度——改内容对齐，别调网格结构
子菜单展开动画无法用 grid 原生实现
grid 本身不支持过渡高度、展开/收起这类动态尺寸变化。你不能对 grid-template-rows 做 transition，浏览器不认这个属性的动画。
- 子菜单动画得靠
max-height+overflow+transition组合，和grid无关 - 如果硬要用
grid控制显隐，只能配合grid-area和visibility: hidden，但这没有过渡效果 - 展开时记得同步更新
aria-expanded和aria-hidden，不然屏幕阅读器会跳过子菜单
IE11 兼容性下 grid 垂直菜单直接失效
IE11 的 grid 实现是旧草案（2011），不支持 grid-template-areas、gap、subgrid，连 grid-column 的语法都不同。一旦用了现代写法，整个菜单布局就塌成一列。
立即学习“前端免费学习笔记（深入）”；
- 必须用 Autoprefixer +
postcss-grid-kiss或手写双语法：比如grid-column: 1 / -1得补-ms-grid-column: 1; -ms-grid-column-span: 1 -
gap必须转成margin，且要避开 IE 对:first-child的 margin 处理 bug - 图标字体（如 Font Awesome）在 IE11 下可能加载失败，建议 fallback 到 inline
svg
真正麻烦的不是写法，是当子菜单里有三层数量不定的项时，grid 的行列定义会从“声明式”退化成“猜测式”——这时候不如老实用 flex 套 position，反而更可控。
