优先用 repeat(auto-fit, minmax(120px, 1fr)))：120px 为最小宽度，1fr 实现等比扩展，auto-fit 合并空轨道以自适应；避免 auto-fill 留白、fr 均分挤压、max-content 撑破容器。
grid-template-columns 用 fr 单位还是 max-content？
自适应导航菜单的核心是让菜单项在空间充足时横向铺开、窄屏时自动换行或收缩，grid-template-columns 的取值直接决定行为逻辑。用 fr 会强制均分可用空间，导致小屏下文字被挤压甚至换行错乱；用 max-content 又容易撑破容器，失去响应性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
repeat(auto-fit, minmax(120px, 1fr)))：120px 是单个菜单项最小宽度（含 padding），1fr表示有空间就等比扩展，auto-fit会在空轨道被合并，实现“尽可能多列 + 自动收缩” - 避免
repeat(auto-fill, ...)：它保留空轨道，可能在右侧留白，视觉上像断层 - 如果菜单项文字长度差异极大（比如“首页” vs “关于我们及合作伙伴联络方式”），加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防溢出
menu item 换行后对齐不齐？检查 grid-auto-flow 和 justify-items
网格默认按行优先填充（grid-auto-flow: row），但换行后新行的首项常左偏，尤其当上一行末尾有空余空间时——这不是 bug，是网格轨道对齐策略未显式声明的结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设
justify-items: stretch（默认值，但某些重置 CSS 会改掉）；若要居中对齐菜单文字，单独给a或button加text-align: center - 禁用
grid-auto-flow: column：它会让元素从上到下填满一列再换列，完全违背导航横排+换行的预期 - 不要依赖
justify-content: center居中整个网格容器：它只影响轨道整体位置，不解决单行内项对齐问题
移动端折叠菜单和 Grid 共存时，display: none 会破坏网格结构
常见做法是用媒体查询把小屏下的 .nav-grid 设为 display: none，同时显示汉堡按钮和侧边菜单。但这样会导致网格容器彻底退出文档流，JS 动画、焦点管理、SSR 渲染都可能出问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
visibility: hidden; position: absolute; pointer-events: none;隐藏网格容器，保留其 DOM 结构和尺寸计算上下文 - 确保汉堡菜单的
aria-expanded和网格容器的aria-hidden同步更新，否则屏幕阅读器会读到隐藏内容 - 如果用 JS 控制显示/隐藏，别直接操作
style.display，改用 class 切换，方便 CSS 过渡动画（如opacity+transform）
IE11 不支持 grid-gap？用 margin 模拟但注意负边距陷阱
grid-gap 在 IE11 完全无效，且 gap 属性本身也不被识别。强行加会被忽略，不能靠降级 fallback。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对每个菜单项加
margin-right: 16px;，最后一项用:last-child { margin-right: 0; }消除多余间隙 - 禁止用
margin-left配合父容器margin-left: -16px：IE11 对负边距渲染不稳定，可能引发布局塌陷 - 如果项目数动态变化（比如权限控制隐藏某菜单项），用 JS 动态加 class 区分“非末项”，比纯 CSS
:last-child更可靠
Grid 布局的自适应本质不是“写一套代码适配所有”，而是明确每种断点下轨道如何生成、项如何对齐、隐藏逻辑是否破坏可访问性。最易被忽略的是：网格容器的 min-width 没设，导致超窄屏下轨道压缩到无法点击；或者 grid-template-areas 写死区域名，却没在不同断点里重新定义，造成语义错位。
