本文内容

歇了吧... 哎呀， 最近良好更多人都在说图片墙在手机上忽然变成一堆单列，或者列数更少得可怜。别慌！这其实不是你的 CSS 写错了 问题不在于你的代码本身，而在于你用的 `minmax` 函数里的 `150px` 当前这个值。它强较大行把列较宽撑较大，引起 Grid 没有足够的空间范围来体现那么更多列。最终还是结果是就是浏览器只能塞一列进去，看着像瀑布流，可不是你想要的紧凑更多列布局。

常见问题： iPhone 上图片墙忽然变更少

总体来说就是这种情况。很更多人都觉得是这是因为 CSS 写错了但实际情况是根本不是。

为哪些会出现这种情况？

没准儿… 核心原因：`minmax` 中的 `150px` 在较小屏下强较大行撑开列较宽，引起 Grid 容器无法容纳足够列数。

解决方案：修改 `minmax` 的值！尝试用更较小的数值， 我是深有体会。 或者直接采用 `` 代替 `` 来控制图片的尺寸。

别忘了这一些细节

• 不要依赖 JavaScript 去动态插入类名适配首屏渲染时 JS还没落实呢！用户看到的还是闪动的单列布局。
• 测试沉重点不是 Chrome微信内置浏览器、 QQ浏览器等等，它们的 CSS 支持度有可能比 Chrome 还差呢！
• 注意图片加载的时机lazyload 图片在进入视口前没有尺寸， Grid 会按 `0×0` 来渲染，等图片加载完才沉重排。能够加 `loading="eager"` 或者预设 `width`/`height` 来缓解当前这个问题。 但这属于资源条件加载优化范畴 ，不在 Grid 控制范围内 。
• 最常见的错误是写死列数或用 flex-wrap 坚硬撑最终还是结果是较小屏下图片被压缩变形或者留出较大片空白 。Grid 的自动列生成才是正解!核心思路：让浏览器根据容器较宽度和单图最较小较宽度动态算出能放几列 ,而不是人为指定 `grid-template-columns: repeat`这种固定写法。

进阶技巧

clamp 的神奇用法

Android 系统对 `clamp` 的支持很差 ， 会忽略整条声明 ，回退到单列 。所以要准备降级方案，好吧...。

我持保留意见... `clamp` 表示最较小不较小于120px ， 理想值是视口较宽度的25vw ，最较大不较高于180px 。关键是25vw当前这个值 ，根据不同的屏幕尺寸会改变 。

我直接好家伙。 `gap` 比 `margin` 更适合控制间距 。避免反复声明 `@media`, 只改换 grid template areas 和 template columns即可.

采用 CSS Grid 和 Auto Layout 实现响应式布局

翻旧账。 记住这一些技巧 ，就没问题了！希望这篇文章能协助你解决在移动端调整图片的杂乱问题。