直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 可适配绝大多数移动端数据列表，但需注意容器尺寸控制、gap与padding叠加问题及旧内核降级处理。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能跑通绝大多数移动端数据列表，但卡点不在语法本身，而在容器尺寸控制、间隙叠加和旧内核降级处理。
为什么 minmax(280px, 1fr) 必须配合 auto-fit
单独写 minmax(280px, 1fr) 不生效——它只是定义单列范围，不触发自动列数计算。必须套在 repeat() 里，且第二个参数得是 auto-fit 或 auto-fill：
-
auto-fit：空轨道会被收缩，现有列拉伸填满容器（推荐用于数据列表，视觉紧凑） -
auto-fill：保留所有可能轨道，哪怕为空（适合后续 JS 动态插入卡片的场景） - 别写死
repeat(3, 1fr)，否则小屏下卡片被硬压变形，文字挤成一团
gap 和 padding 别混用，尤其在小屏上
移动端实际可用宽度本就紧张，gap: 1.5rem + padding: 1rem 容易让卡片内容区缩到不足 100px，手指点不中按钮或图标：
- 优先用
gap控制卡片间距，它不参与尺寸计算 - 网格容器设
box-sizing: border-box，避免border和padding撑出滚动条 - 小屏下把
gap降到0.75rem，比全局统一值更安全 - 别在卡片内部再设
margin-bottom，会和gap叠加，导致行高失控
Android WebView 和 iOS Safari 的兼容底线怎么守
不是“能不能用”，而是“出问题时怎么不崩”。iOS 10.3+、Chrome 57+ 支持 auto-fit，但企业内嵌 WebView 常卡在 Android 4.4 或 iOS 9 内核：
立即学习“前端免费学习笔记（深入）”；
- 双写声明，后写的覆盖前写的：
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - 不要依赖
@supports (display: grid)检测auto-fit，得用 JS UA 判断或特征检测 - 真要兼容 iOS 9，退回
flexbox + flex-wrap，配flex: 0 0 calc(50% - 0.5rem)控制平板两列 - 注意：Safari iOS 16+ 对
grid-area和flex混用敏感，分层容器里别交叉布局模式
真正难调的从来不是那三行 Grid 代码，而是 280px 这个最小宽度是否适配你家图标尺寸、gap 在 320px 屏上是否留出可触控余量、以及当用户横屏切 iPad Pro 时，auto-fit 算出来的列数会不会让某张图表被截掉半截——这些都得实机连真机调试，模拟器看不出手指划过时的卡顿感。
