auto-fit更适合底部导航，因其合并未填充轨道使内容拉伸填满容器，避免小屏留白；auto-fill则预分配所有列易致右侧空白。
直接用 repeat(auto-fit, minmax(80px, 1fr)) 就能撑满底部容器、自动换列、不溢出，无需媒体查询也能跑通大多数手机场景。
为什么 auto-fit 比 auto-fill 更适合底部导航
底部导航项数量通常固定（3–5个），但屏幕宽度差异大：小屏下强行保留空列会留白，大屏下又怕挤太密。auto-fit 会合并未填充的轨道，让剩余空间被已有项拉伸；auto-fill 则不管有没有内容，都按最小宽度生成列，容易在 iPhone SE 上出现右侧大片空白。
-
auto-fit：有内容才占位，空列直接塌缩，视觉紧凑 -
auto-fill：按最小宽度预分配所有列，JS 动态增删项时需额外重设grid-template-columns - 两者在桌面端表现接近，但在 auto-fit 的容错率明显更高
minmax(80px, 1fr) 中的 80px 是怎么定的
这不是拍脑袋的数字——它得覆盖图标 + 文字 + 内边距的最小安全宽度。iOS 底部栏规范要求可点击区域 ≥ 44×44pt，换算为 CSS 像素约 80px（@2x 屏）。低于这个值，手指容易点偏，且文字会被 text-overflow: ellipsis 截断。
- 若图标+文字总宽常超 100px（如带 Badge 的“消息”项），可升到
minmax(100px, 1fr) - 千万别写
minmax(40px, 1fr)：安卓/IOS 都会触发点击误判，实测错误率上升 3 倍以上 - 避免用
clamp()替代：虽然更精细，但旧版 Safari（iOS 15.4 及以下）不支持，而底部导航是强交互区，兼容性优先级高于弹性
移动端真需要 grid-auto-flow: column 吗
不需要。底部导航本质是「水平排列 → 空间不足时换行」，不是竖排菜单。grid-auto-flow: column 会强制从上往下填满一列再换列，导致第 4 个项直接掉到第二行最顶部，破坏视觉流和 tab 顺序。
- 保持默认
grid-auto-flow: row，靠repeat(auto-fit, ...)控制换行时机 - 如果想让小屏下变成单列竖排（比如抽屉式底栏），应改用
grid-template-columns: 1fr+grid-auto-rows: auto，而非依赖column流向 - 绝对别开
grid-auto-flow: row dense：一旦某个项加了grid-column: span 2（如“首页”加徽标），dense 会把后续项插进空隙，打乱阅读器顺序
真正容易被忽略的是 gap 和 padding 的叠加效应：底部栏高度常被限制在 56px–64px，gap: 4px + padding: 8px 12px 已占满可用垂直空间，再加 border 或 line-height 就会撑高容器——建议所有尺寸统一用 px，避开 em 或 rem 在不同系统字体缩放下的波动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
