首选auto-fit+minmax组合，因auto-fit合并空轨道避免留白，minmax(120px,1fr)确保最小触控宽度与剩余空间均分；需配合显式对齐、兼容性兜底及子项尺寸约束。
直接用 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 就能跑通绝大多数场景，但必须配合显式对齐、兼容性兜底和子项尺寸约束，否则在 Safari 或小屏上大概率错位、留白或文字被压扁。
为什么 auto-fit + minmax 是首选组合
它让导航项“尽可能多列、有空间就均分、没空间就收缩”，行为可预测：auto-fit 会合并空轨道，避免右侧留白；minmax(120px, 1fr) 中的 120px 是含内边距的最小可触控宽度（iOS/Android 推荐 ≥ 44px，但文字+图标建议 ≥ 100px），1fr 表示剩余空间等分。
别用 auto-fill —— 它保留空轨道，小屏下可能显示一排空白格；也别只写 1fr 1fr 1fr —— 屏幕窄时强制三列，文字换行错乱或溢出。
-
minmax()里禁用em或rem：字体缩放时列数会突变，坚持用px或vw - 如果菜单项文字长度差异极大（如“首页” vs “联系我们及售后服务条款”），加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 父容器必须有明确宽度上下文，否则
1fr分不到像素——常见于body直接子级或 flex 子项中
对齐失效？先检查 justify-items 和子项 text-align
网格默认 justify-items: stretch，但很多 CSS 重置库会改掉它。若导航项文字左偏或上下错位，不是 Grid bug，而是对齐策略未显式声明。
立即学习“前端免费学习笔记（深入）”；
- 给导航容器加
justify-items: center只影响网格单元格内容水平居中，不控制文字本身 - 真正让文字居中，得单独给
a或button加text-align: center - 垂直居中靠
align-items: center，但仅对单行有效；若子项含图标+文字，优先用display: flex; flex-direction: column;内部居中
Safari 14.1 以下或 iOS 13 兼容怎么兜底
auto-fit 在 Safari 14.1+ 才稳定支持，iOS 14.5+ 没问题；但若项目仍需兼容 iOS 13（如企业内网 App），不能只靠 JS 检测降级，得用 CSS 纯兜底。
- 降级写法：
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))+ 外层容器加max-width: 400px（限制最多 4 列） - 更稳妥的是媒体查询显式控制：
@media (max-width: 480px) { grid-template-columns: 1fr; } - 务必检查父容器是否设置了
display: grid且有明确宽度——Safari 对未设宽的祖先会静默忽略整条规则 - iOS 15.4 以下不支持
gap，补grid-column-gap: 10px; grid-row-gap: 10px;
移动端底栏和复杂导航别硬套同一套 Grid 规则
底部导航栏和顶部导航栏的交互逻辑不同：底栏强调触控安全区与图标一致性，顶部导航常含下拉菜单或搜索框，混用同一套 minmax() 值容易出问题。
- 底栏推荐
minmax(80px, 1fr)，并显式设子项min-height: 48px（触控最小高度） - 顶部导航若含 logo + 菜单 + 用户头像，外层用 Grid 划分区域（如
auto 1fr auto），菜单区内部再用 Flex 管理折行，比纯 Grid 更可控 - 别在底栏 Grid 中混用固定像素和
1fr，比如60px 1fr 60px—— 手机上左右占掉 120px，中间可能只剩 20px，图标被压扁
最易被忽略的不是语法，而是“最小可触控尺寸”这个物理约束：Grid 再灵活，也救不了 32px 宽的按钮或 12px 的文字。所有自适应逻辑，都得先过这一关。
