repeat(4, 1fr) 不适合底部导航栏，因其强制均分4列，小屏下空间不足导致文字压扁、溢出或横向滚动；应改用 repeat(auto-fit, minmax(80px, 1fr)) 并约束子项尺寸与内容。
直接用 repeat(4, 1fr) 做底部导航栏，在移动端上会出问题——它强制分 4 列，但小屏根本塞不下 4 个带图标+文字的项，结果不是文字被压扁，就是内容溢出、换行错位，甚至触发横向滚动。
为什么 repeat(4, 1fr) 不适合底部导航栏
底部导航项数量虽固定（比如首页、发现、消息、我的），但“固定数量”不等于“固定列数要硬写死”。repeat(4, 1fr) 的本质是：不管容器多窄，都强行切出 4 栏，每栏均分剩余空间。这在 iPhone SE 这类 320px 宽屏幕上，单栏只有约 70px，连图标都放不下。
- 它不检查子项最小可读宽度，也不响应容器变化
- 遇到长文字（如“我的收藏夹”）时，
1fr无法阻止内容撑开整栏，反而挤压其他项 - IE11 和部分旧版 Safari 对
1fr在小容器中的行为不一致，容易塌陷
repeat(auto-fit, minmax()) 才是真实可用的写法
真正能兼顾“项数固定”和“小屏友好”的，是 repeat(auto-fit, minmax(80px, 1fr))。它不是“必须放满 4 个”，而是“能放几个就放几个，每个至少 80px，有空余就拉伸”。
-
minmax(80px, 1fr)：确保图标+文字不被压缩，同时允许在宽屏下均分扩展 -
auto-fit：自动合并空轨道，避免小屏下留白或强行分列 - 搭配
gap: 4px和padding: 8px 12px，视觉呼吸感更自然
必须同步处理的三个子项细节
只改 grid-template-columns 不够，底部导航项自身必须约束行为，否则 Grid 再聪明也救不了：
- 每个导航项加
min-height: 48px——满足移动端触控最小尺寸标准 - 内部用
display: flex; flex-direction: column; align-items: center;，让图标在上、文字在下，不堆叠不偏移 - 文字容器（如
）设overflow: hidden; text-overflow: ellipsis; white-space: nowrap;，截断过长文本，但别在上直接写overflow: hidden，否则可能切掉图标或箭头
当前页高亮别用 JS 切 class
用 a[aria-current="page"] 配合 CSS 就够了，既语义正确又免去 JS 绑定开销：
footer a[aria-current="page"] {
color: #007bff;
font-weight: 600;
}
注意：确保 HTML 中对应链接有 aria-current="page" 属性，而不是靠 JS 动态添加——后者在 SSR 或首屏渲染时会丢失状态，导致闪动或高亮失效。
最易被忽略的是：Grid 的 minmax() 计算发生在布局早期，它不等子项内容渲染完成。如果子项里嵌了未设 max-width 的图片或未约束的 flex 容器，依然会撑破列宽。所以“写对 Grid”只是第一步，“管住内容”才是落地关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
