Grid导航项水平平铺需用repeat(auto-fit, minmax(120px, 1fr)))，auto-fit合并空轨道，minmax确保最小宽度与弹性分配；移动端须加touch-action: manipulation和cursor: pointer；对齐优先用flex而非align-items；IE11不支持auto-fit/minmax，需@supports降级为inline-block。
Grid布局下导航项不水平平铺？检查grid-template-columns是否设为repeat(auto-fit, minmax(120px, 1fr)))
Grid实现水平平铺的关键不是display: grid本身，而是列模板如何响应容器宽度。用repeat(auto-fill, 1fr)会导致小屏下强行等分、文字被压缩；而auto-fit配合minmax()才能真正“能放几个放几个”。
常见错误现象：nav在手机上变成单列堆叠、中间留白，或文字溢出截断。
- 必须用
auto-fit（不是auto-fill），它会合并空轨道 -
minmax(120px, 1fr)中120px是单个菜单项最小宽度，低于此值就收缩换行；1fr是最大可占比例，确保均分剩余空间 - 父容器需设
width: 100%或max-width，否则Grid可能按内容撑开，失去响应行为
移动端点击无反应？touch-action: manipulation和cursor: pointer不能少
Grid布局本身不解决交互问题。iOS Safari对非<a></a>或button元素的点击区域识别较弱，尤其当菜单项用div包裹时，容易出现点不动、延迟300ms响应的情况。
使用场景：导航项是div或span而非语义化标签时。
立即学习“前端免费学习笔记（深入）”；
- 给每个导航项加
cursor: pointer，触发浏览器对可点击元素的默认识别 - 加上
touch-action: manipulation，禁用双击缩放，同时加速触摸响应 - 避免在
:hover里只改颜色——移动端没hover，得同步写:active和focus-within
菜单高度塌陷或文字垂直不对齐？align-items和line-height要协同控制
Grid容器默认align-items: stretch，但导航文字常因字体度量差异（如font-size与line-height不匹配）导致上下留白不均，看起来像没居中。
性能影响：滥用align-items: center可能导致子元素重排，尤其在动态插入菜单项时。
- 优先用
display: flex; align-items: center; justify-content: center处理单个菜单项内部对齐，比依赖Grid整体对齐更稳定 - 若坚持用Grid对齐，设
align-items: center+height: 48px（明确高度），避免由内容撑高 - 慎用
line-height: 48px——在多行文本或图标+文字混合时会失效，flex方案容错率更高
IE11兼容性崩了？别用auto-fit和minmax()，降级用inline-block或float
IE11支持Grid但不支持auto-fit、minmax()、gap等关键响应式特性，直接写Grid会退化成单列或完全失效。
兼容性影响：全球仍有约0.3%流量来自IE11（企业内网场景不可忽略）。
- 用
@supports (display: grid) and (grid-template-columns: repeat(auto-fit, 1fr)))做特性检测，再套Grid样式 - 降级方案优先选
display: inline-block+vertical-align: middle，比float更易维护 - 别试图用
grid-row: 1之类hack绕过IE限制——它根本不解析这些值，只会整个忽略规则
真正难的不是写出来，是让minmax()在各种设备DPR、缩放比例、字体渲染引擎下都保持视觉一致。这点连Chrome DevTools的设备模拟都测不准，得真机反复调。
