核心是用 repeat(auto-fit, minmax(80px, 1fr))) 实现列数自动适配，配合 aspect-ratio、flex 垂直居中文字、媒体查询适配高 DPR 屏 gap，并确保 grid 容器 width: 100% 贴边。
用 grid-template-columns 实现列数自动适配
核心是让每行图标数量随容器宽度动态变化，而不是写死列数。直接写 grid-template-columns: repeat(4, 1fr) 就锁死了 4 列，手机横屏、平板、桌面全一样，显然不行。
正确做法是用 repeat(auto-fit, minmax(...)) 搭配 minmax() 定义单个图标的最小宽度，Grid 自动计算能塞几列：
display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))); gap: 12px;
这里 80px 是每个图标（含内边距）的最小占位宽度，1fr 表示剩余空间均分。容器变窄时，Grid 会主动减少列数，保证每列不小于 80px；变宽则增加列数，直到填满。
-
auto-fit和auto-fill都能触发自动列数，但auto-fit会把空列收缩掉，更符合“图标阵列”视觉预期 - 别用
rem或em做minmax()的最小值——字体缩放时图标会错乱，px或vw更稳 - 如果图标尺寸本身是响应式的（比如用
width: 100%的minmax()的最小值得包含图标+文字+内边距总和，不能只看图标本身
图标尺寸与文字对齐必须用 aspect-ratio + flex
手机桌面图标通常是正方形，文字在下方居中。光靠 Grid 控制列，图标本身若高宽不一致或文字换行错位，整个阵列就松散了。
关键控制点有两个：aspect-ratio 锁定图标容器比例，display: flex 垂直居中文字：
.app-icon {
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 8px;
}
justify-content: flex-end 把文字压到底部，配合 padding-bottom 留出呼吸感，比用 margin-top: auto 更可靠。
- 没加
aspect-ratio时，不同设备像素比下图标容易被拉扁或压扁，尤其 iOS Safari 对height: 0; padding-bottom: 100%支持不稳定 - 文字用
font-size: 12px之类固定值，别依赖父容器 font-size 缩放，否则小屏上字太小看不清 - 图标如果是 SVG，记得加
width: 100%; height: 100%并设preserveAspectRatio="xMidYMid meet"，不然可能裁切
gap 在高 DPR 屏幕下容易显得过宽
你设了 gap: 12px，在 iPhone 14 Pro（DPR=3）上实际渲染是 36 物理像素，看着像隔了一条缝。这不是 bug，是 CSS 像素和设备像素的天然差异。
解决办法不是砍掉 gap，而是用 calc() 动态微调：
gap: calc(12px / (1 * device-pixel-ratio));
但目前 device-pixel-ratio 不是合法 CSS 变量，所以退而求其次：用媒体查询区分高 DPR 设备：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.desktop-grid {
gap: 8px;
}
}
- 别用
gap: 0.5rem这类相对单位——rem基于根字号，和 DPR 无关，起不到补偿作用 - 如果项目已用 CSS 自定义属性管理间距，建议定义两套：
--gap-normal: 12px和--gap-hidpi: 8px，方便维护 - Gap 过小（如
2px）在低 DPR 屏上又容易糊成一条线，8–12px 是较稳妥的区间
Grid 容器必须设 width: 100% 且避免隐式 min-width
常见现象：图标阵列在小屏上横向滚动，或者右侧留白巨大。多数是因为 Grid 容器本身没占满父容器，或父容器有默认 min-width（比如 在某些 reset 中被设了 min-width: min-content）。
最简验证方式：给 Grid 容器加 outline: 1px solid red，看是否贴边。不贴边就说明它没撑开。
- 务必显式写
width: 100%，哪怕父容器是block元素——某些 Flex 容器或绝对定位上下文中，Grid 会按内容宽度收缩 - 检查父级有没有
overflow-x: hidden却没设width，这会导致 Grid 计算可用宽度出错 - 避免在 Grid 容器上同时用
max-width和margin: 0 auto，除非你真需要居中限制宽度；手机桌面通常要铺满，max-width反而制造意外留白
真正麻烦的是嵌套场景：比如图标阵列放在一个 position: sticky 的导航栏下方，而导航栏高度动态变化——这时 Grid 的 gap 和列数可能因重排而抖动。这种时候，宁可把图标区域单独抽成固定高度区块，也不要让它跟流式布局强耦合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
