minmax(80px, 1fr) 比 1fr 更适合图标单元，因其提供“有底线的弹性”：80px 确保最小可交互尺寸，1fr 在满足前提下均分剩余空间，配合 auto-fit 实现窄屏减列、宽屏加列，视觉密度合理。
直接用 grid-template-columns: repeat(4, 1fr) 或固定 px 列宽，图标阵列在不同设备上会严重失衡——小屏挤成一坨，大屏留大片空白。真正可控的“固定单元尺寸”，不是锁死列数，而是让每个网格项（图标+文字）拥有稳定最小占位，并随容器弹性伸缩。
为什么 minmax(80px, 1fr) 比 1fr 更适合图标单元
写死 grid-template-columns: 1fr 1fr 1fr 1fr 看似“固定四列”，实则每列宽度随容器线性变化：手机横屏时单列可能只剩 60px，图标文字全糊；桌面屏又撑到 200px+，留白难看。而 minmax(80px, 1fr) 提供的是“有底线的弹性”：
-
80px是图标容器（含内边距、文字高度）的最小物理占位，确保手指可点、文字可读 -
1fr表示在满足最小值前提下，剩余空间均分——窄屏自动减列，宽屏自然加列，视觉密度始终合理 - 必须搭配
auto-fit（不是auto-fill），否则空列残留，焦点顺序错乱，语义污染
如何让每个图标单元真正“尺寸固定”而不变形
仅靠 Grid 列定义不够。图标本身若用 minmax() 的“80px”只是容器最小宽，内容仍可能溢出或塌陷：
- 给图标外层容器设
aspect-ratio: 1 / 1，强制正方形基底（兼容 Chrome 88+/Firefox 89+/Safari 15.4+） - 内部图标用
width: 100%; height: 100%; object-fit: contain（图片）或font-size: 24px（字体图标），避免拉伸 - 文字用
font-size: 12px+line-height: 1+text-overflow: ellipsis控制高度，别让它撑高单元格 - 绝对不要用
rem或em设minmax()的最小值——用户缩放字体时，图标网格会突然跳列
小屏下“固定尺寸”容易踩的兼容性坑
Android 旧 WebView 或 iOS 14 以下 Safari 不支持 aspect-ratio 和 auto-fit，此时“固定单元尺寸”会退化为内容驱动高度，导致网格错行：
- 降级方案：用
padding-top: 100%+position: relative+ 绝对定位子元素模拟正方形（需额外 wrapper） - 更稳妥的做法是媒体查询兜底：
@media (max-width: 480px) { grid-template-columns: repeat(3, 1fr); }，放弃 auto-fit，改用明确列数保底 - 别试图 polyfill
auto-fit——JS 计算列数在滚动/resize 时性能差，且无法同步伪类焦点流
真正的“固定单元尺寸”，是视觉感知上的稳定，不是 CSS 像素的僵硬锁定。重点在于守住最小可交互宽度（80px 左右）、控制内容溢出、并为不支持特性提供无感降级——而不是执着于让所有设备都显示完全相同的列数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
