直接写repeat(4, 1fr)锁死4列，小屏下单列强制占25%宽度，导致图标压缩、文字换行错乱；应改用repeat(auto-fit, minmax(80px, 1fr))，使浏览器按最小宽度动态计算并减少列数，确保每列不小于80px且等宽填满整行。
为什么直接写 repeat(4, 1fr) 会让图标在手机上挤成一列超宽文字
因为这锁死了 4 列，Grid 不会主动减少列数；小屏下每列强行分得 25% 宽度，但图标内容（比如带文字的 SVG 容器）撑不开，文字换行错乱、图标被压缩或溢出。真正要的是“能塞几列就几列”，不是“必须四列”。repeat(auto-fit, minmax(80px, 1fr)) 才是触发动态列数的核心——浏览器先按 80px 尝试铺列，塞不下就自动降为 3 列、2 列甚至 1 列。
minmax(80px, 1fr) 的两个参数到底怎么影响实际列数
80px 是硬性门槛：容器可用宽度 ÷ 80px 得到理论最大列数，但浏览器只取整数部分；若结果为 0（比如 iPhone SE 可用宽仅 300px，而你设了 minmax(320px, 1fr)），就会 fallback 成单列，宽度 = 容器全宽。1fr 不是“最大宽度”，而是“剩余空间均分”的分配逻辑——它让所有有效列等宽拉伸，填满整行。常见翻车点：
- 写成
minmax(80px, auto)：失去弹性，列宽冻结在内容自然宽，auto-fit失效 - 用
em或rem做最小值：字体缩放时列数突变，图标阵列跳动 - 最小值没预留
gap和内边距：图标本身宽 64px，但容器含padding: 8px+gap: 12px，实际需 ≥ 84px，设80px就可能小屏卡死在 1 列
为什么选 auto-fit 而不是 auto-fill
图标库通常是内容驱动型布局——有多少图标就排多少列，不需要预留空位。auto-fill 会在小屏下预占所有符合条件的轨道，比如容器宽 350px、minmax(120px, 1fr) 理论可放 2 列（2×120=240 ≤ 350），它就真生成 2 个轨道，哪怕只有 1 个图标，右边也会空出半屏。auto-fit 则只生成 1 个轨道，并把这唯一一列拉伸占满整行，视觉更紧凑。DevTools Layout 面板里勾选 “Show line numbers”，能一眼看出空轨道是否被合并。
子元素样式怎么悄悄破坏 auto-fit 计算
即使 Grid 容器写对了，子项加一行错的 CSS 就能让响应式失效：
- 给图标容器设
width: 100px或flex: 0 0 100px：强制撑开列宽，导致换行错乱或横向滚动 - 图标用
position: absolute或外层套了display: flex：Grid 轨道计算中断，降级为普通流布局 - 图标内文字过长且没处理：默认不折行，撑破
minmax下限；加overflow-wrap: break-word更稳 - 图片用
aspect-ratio却没配显式高度：Safari 下加载时跳动、比例崩坏；建议改用height: 0; padding-bottom: 100%或包裹aspect-ratio+height: auto
最易忽略的是：父容器没设 width: 100% 或被其他样式（如 max-width: 600px）截断，导致 Grid 根本收不到真实可用宽度——auto-fit 再聪明也无从算起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
