repeat(3, 1fr)固定生成三列，不响应屏幕；应改用repeat(auto-fit, minmax(280px, 1fr))实现自适应列数，minmax首参过大（如320px）在小屏下可能导致无列显示。
repeat(3, 1fr)为什么在小屏上还是三列？
它根本不会“响应”屏幕宽度——repeat(3, 1fr) 就是硬生成 3 条轨道，浏览器照单全收。小屏下每列被压缩到比如 120px，图标文字挤成一团，甚至换行错乱。这不是 bug，是定义行为：你写了“3 列”，它就给你 3 列。
真正要的是“能塞几列就几列”，得换成动态关键字：
-
repeat(auto-fit, minmax(280px, 1fr))：每列至少 280px，不够就不生成新列 -
repeat(auto-fill, minmax(280px, 1fr))：强行铺满所有可能列，哪怕空着也占位
移动端优先选 auto-fit，否则容易右侧留白或触发横向滚动。
minmax()第一个参数设太大，导致列数直接归零
比如设了 minmax(320px, 1fr)，但 iPhone SE 屏宽仅约 300px（减去边距后更少），容器可用宽度
检查点：
- 图标容器自身宽 64px，但含
padding: 8px和gap: 12px→ 实际所需最小宽度 ≥ 84px，设 80px 就可能临界失效 - 避免用
em或rem做第一个参数，字体缩放会改变列数 -
minmax(200px, auto)是无效写法，auto在 max 位置不被识别，整条声明可能静默降级
子项样式偷偷破坏网格计算
再正确的 grid-template-columns 也救不了被子项自己搞崩的布局。常见干扰项：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 子项写了
width: 200px或flex: 1→ 强制固定尺寸，撑破轨道，换行失效 - 子项用了
float或position: absolute→ 直接脱离文档流，Grid 完全不接管定位 - 父容器没设
display: grid，或被外层flex压缩为 0 宽度 → Grid 根本没启动
调试时先给子项加 outline: 1px solid red，看是否贴着网格线排列；如果不是，说明 Grid 没生效，优先查 display 和子项脱离流问题。
Safari 旧版本直接忽略 auto-fit 和 row-gap
iOS 15.3 及更早、macOS Monterey 12.2 及更早的 Safari，压根不解析 auto-fit、row-gap、grid-template-areas 这些关键字，加 -webkit- 前缀也无效。它不是“兼容性差”，是根本不认识。
验证方式：
- 打开 Safari DevTools → Computed 面板 → 查
display是否还是grid - Styles 面板里
grid-template-columns显示为空或none，就是被静默丢弃
兼容方案：
- 用显式行列定位替代
grid-template-areas，如grid-column: 1 / -1; grid-row: 1; -
gap改用grid-column-gap+grid-row-gap分写（旧 Safari 支持） - 对关键布局用
@supports (display: grid)做降级兜底
真正麻烦的不是语法本身，而是 minmax() 参数、子项尺寸、容器宽度三者之间的隐式耦合——改一个值，列数、列宽、换行、视觉节奏全跟着变，必须一起调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
