CSS网格布局垂直导航菜单设计

• 把图标和文字都包进一个 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，反而更可控。

本篇关于《CSS网格布局垂直导航菜单设计》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！