根本原因是minmax(150px,1fr)中150px在小屏下强制撑宽列，导致浏览器退化为单列；应改用clamp(120px,25vw,180px)实现响应式最小列宽，并配合aspect-ratio和object-fit解决高度不一致问题。
为什么 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) 在移动端失效
常见现象是图片墙在 iPhone 上列数突然变少、间隙错乱，甚至单列铺满屏幕。根本原因不是 CSS 写错了，而是 minmax(150px, 1fr) 中的 150px 在小屏下强行撑开列宽，导致 grid 容器无法容纳足够列数，浏览器只能退化成“尽可能塞一列”，于是视觉上变成竖排瀑布流——但这并非你想要的紧凑多列布局。
- 真实设备像素比（如 iPhone 的 @2x/@3x）不影响
px计算，但会影响图片渲染清晰度，别误以为是单位问题 -
1fr是剩余空间均分，和容器宽度强相关；150px是硬性最小值，二者冲突时浏览器优先保最小宽度，牺牲列数 - 图片本身没设
max-width: 100%或height: auto，会导致拉伸/裁剪，进一步破坏 grid 对齐
用 minmax() + clamp() 动态控制最小列宽
直接把固定 150px 换成响应式范围，让最小列宽随视口缩放：从大屏的 180px 平滑过渡到小屏的 120px，同时保留 1fr 的弹性分配能力。
img-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 25vw, 180px), 1fr)));
gap: 8px;
}
<p>img-grid img {
width: 100%;
height: auto;
display: block;
}-
clamp(120px, 25vw, 180px)表示：最小不小于120px，理想值是视口宽的25vw，最大不超过180px -
25vw是关键——iPhone SE（375px 宽）下约94px，但被clamp下限卡在120px；iPad（768px）下约192px，被上限卡在180px，实际列数自然稳定在 3–4 列 - 务必加
gap而非靠margin，否则 grid 会把 margin 当作项目内容参与尺寸计算
遇到图片高度不一致导致行高塌陷怎么办
grid 默认按行内最大高度对齐，如果某张图特别高，整行会被它撑开，下方图片出现大片空白。这不是 grid 错，是未约束图片高度行为的副作用。
- 给
img加object-fit: cover+ 固定容器aspect-ratio最可靠：img-grid > * { aspect-ratio: 4 / 3; overflow: hidden; } img-grid img { width: 100%; height: 100%; object-fit: cover; } - 避免用
height: 100%却不设父容器高度——grid item 默认height: auto，子元素height: 100%无效 - 不用
align-items: start强制顶部对齐，它只解决对齐，不解决行高不一致带来的视觉割裂
旧版 Android WebView 不支持 clamp() 怎么办
Android 4.4–9 的系统 WebView 对 clamp() 支持极差，会直接忽略整条 grid-template-columns 声明，回退到单列。必须提供降级方案。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports隔离新写法，老环境走固定断点：@supports not (width: clamp(0px, 1vw, 1px)) { img-grid { grid-template-columns: repeat(2, 1fr); } } <p>@media (min-width: 600px) { @supports not (width: clamp(0px, 1vw, 1px)) { img-grid { grid-template-columns: repeat(3, 1fr); } } } - 不要依赖 JavaScript 动态插入 class 适配——首屏渲染时 JS 还没执行，用户会看到闪动的单列布局
- 测试重点不是 Chrome，而是微信内置浏览器（X5 内核）、QQ 浏览器（同样 X5），它们的 CSS 支持度常滞后于同版本 Chrome
实际最易被忽略的是图片加载时机：lazyload 图片在进入视口前没有尺寸，grid 会按 0×0 渲染，等图片加载完才重排。加 loading="eager" 或预设 width/height 属性能缓解，但这属于资源加载优化范畴，不在 grid 控制范围内。
