minmax() 在 grid-template-columns 中需配合 auto-fit 或 auto-fill 才能响应式生效，如 repeat(auto-fit, minmax(320px, 1fr)))；单独使用 minmax(300px, 1fr) 因依赖父容器宽度而失效。
minmax() 在 grid-template-columns 里怎么写才生效
直接写 minmax(300px, 1fr) 是常见错误——它只在容器有明确宽度时才起作用，而移动端 viewport 宽度变化频繁，必须配合 repeat() 和自动断行机制。否则网格项会溢出或固定列数不响应。
正确写法是结合 auto-fit 或 auto-fill：
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)));\ngrid-auto-rows: 1fr;
其中 320px 是单列最小宽度（适配 iPhone SE 屏宽），1fr 表示剩余空间均分。浏览器会根据容器宽度自动计算能放几列，不足时自动换行。
-
auto-fit会折叠空轨道（推荐，更紧凑） -
auto-fill保留空轨道占位（适合需要 JS 动态插入的场景） - 不要写死列数如
repeat(3, ...)，否则失去响应性
为什么 max-width + margin: auto 不顶用
很多开发者先给容器设 max-width: 1200px 再居中，结果在小屏上出现横向滚动条——这是因为 minmax() 的最大值（如 1fr）仍基于父容器计算，而父容器若未限制宽度或未设 box-sizing: border-box，padding/border 会撑大实际尺寸。
关键修复点：
- 根容器必须加
width: 100%或max-width: 100% - 所有网格父元素设
box-sizing: border-box - 避免在 grid 容器上同时用
padding和gap，优先用gap控制间距（它不参与尺寸计算）
Android WebView 和 Safari 对 minmax() 的兼容差异
Android 4.4–6.0 的 WebView、iOS 9–10 的 Safari 不支持 auto-fit，会退化成单列；iOS 11+ 和 Chrome 57+ 支持完整语法。不是“能不能用”，而是“怎么降级”。
稳妥方案是双写：
.grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr); /* fallback */\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)));\n}
注意：CSS 解析器会忽略无法识别的声明，所以把新语法写在后面即可覆盖旧写法。
- 不能依赖
@supports (display: grid)检测auto-fit，得用 JS 特征检测或 UA 判断 - iOS 10.3+ 开始支持
auto-fit，但部分企业内嵌 WebView 仍卡在旧内核 - 如果项目需支持 iOS 9，改用
flexbox + media query分段控制列数
gap 和子元素 margin 混用导致的错位
当网格项内部有按钮或图片，又同时设置了 gap: 16px 和子元素 margin-bottom: 8px，视觉间距会叠加成 24px，且在不同屏幕下比例失调。
原则：网格布局中，**间距应由容器统一控制**：
- 用
gap管理网格项之间距离 - 子元素内部用
padding或margin，但禁止跨方向外扩（如网格项设margin-right） - 若需首尾无 gap，用
:first-child/:last-child覆盖，而非靠 margin 抵消
容易被忽略的是 gap 在 flexbox 中无效，只对 grid 生效——别在 flex 容器里写 gap 期待它工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
