移动端底部栏不能只靠grid-template-columns: 1fr实现纵向堆叠，因为grid默认按行流向（grid-auto-flow: row）填充，需配合grid-auto-flow: column、grid-auto-rows: auto才能使导航项垂直排列；仅设单列宽度不改变流向。
移动端底部栏为什么不能只靠 grid-template-columns: 1fr
加了 grid-template-columns: 1fr 后导航项还是横着挤在一行？这是最常踩的坑。Grid 不会因为列数变 1 就自动“竖排”——它只控制列宽，不控制流向。如果没配 grid-auto-flow: column，所有项仍按默认 row 流向从左到右填满那一列，视觉上还是平铺，只是文字可能换行或溢出。
真正让底部栏在小屏下纵向堆叠的关键组合是：
-
grid-template-columns: 1fr（强制单列容器） -
grid-auto-flow: column（让每个导航项按列方向依次向下放置） -
grid-auto-rows: auto（避免每项被拉成等高，破坏紧凑感）
漏掉任意一项，都可能出现“看起来像单列但实际没堆叠”或“每项占满全屏高度”的反效果。
如何用 repeat(auto-fit, minmax()) 在中大屏保持多列，又不写媒体查询
桌面端要 4–5 个图标并排、平板缩为 3 个、手机切为 1 个，不用写一堆 @media，直接用：
footer nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(72px, 18vw, 100px), 1fr));
gap: 4px;
padding: 8px 12px;
}
这里 clamp(72px, 18vw, 100px) 比纯 minmax(72px, 1fr) 更稳：窄屏下不会因 18vw 过小导致图标压缩变形，宽屏下又不会因 100px 上限被突破而撑开间距。注意必须用 auto-fit，auto-fill 会在小屏留空列，造成底部空白。
兼容性提醒：auto-fit 在 IE 完全不支持，如需兼容，得 fallback 到媒体查询方案。
图标文字垂直居中失效？检查 flex 子项的 min-height 和 box-sizing
即使 Grid 容器设对了，每个 a 里图标+文字仍可能上下偏移或换行错位。常见原因是没控制好子项自身尺寸行为：
- 必须设
min-height: 48px（或符合 Material Design 触控最小尺寸），否则小屏下文字行高 + 内边距可能让容器塌缩 -
display: flex的子项要加box-sizing: border-box，否则padding会额外撑高，和min-height冲突 - 别依赖
line-height垂直居中文字，用flex-direction: column; justify-content: center;更可靠
另外，iOS Safari 对 gap 支持较晚（iOS 16.4+），若需兼容更老版本，可用 margin 替代 gap，但要注意首尾项的外边距处理。
为什么 grid-auto-flow: dense 会让底部栏顺序混乱
有人想让“当前页”高亮项自动上浮到第一位置，加了 grid-auto-flow: dense，结果整个导航顺序错乱，甚至 tab 键焦点跳转异常。这是因为 dense 只影响**未指定位置的隐式网格项**，而底部栏的每一项通常都有明确 DOM 顺序和语义结构，屏幕阅读器、键盘导航、SEO 都依赖这个顺序。
dense 强行把后续项插进前面空缺，会破坏源顺序，导致：
- 盲人用户听到的菜单顺序 ≠ 视觉顺序
- JS 动态插入新项时，定位不可预测
- 某些安卓 WebView 下触发渲染 bug，图标闪烁或重叠
高亮当前项，应该用 CSS 类切换颜色/粗细，而不是靠 Grid 重排顺序。真正需要重排的场景极少，多数时候是误用。
最易被忽略的一点：底部栏的 position: fixed 和 Grid 容器的 height 冲突。Grid 自动计算行高时，若父容器有固定高度或 min-height: 100vh，可能导致内容被裁剪——尤其在 iOS Safari 中，地址栏收起/展开会动态改变视口高度，引发布局抖动。稳妥做法是去掉容器高度限制，让 Grid 完全由内容驱动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
