用 css grid 替代 float 或 inline-block 是解决移动端宫格错位、塌陷、图片高度不一致等问题的最稳方案，关键在于合理设置断点与 grid-template-columns，推荐使用 repeat(auto-fill, minmax(140px, 1fr)) 并配合 gap、aspect-ratio 等属性实现响应式自适应。
用 grid 布局替代 float 或 inline-block 是最稳的解法
移动端宫格错位、最后一行塌陷、图片高度不一致——这些问题基本都源于用 float 或 inline-block 强行“凑”列数。CSS Grid 天然支持列数控制与自动换行，且对不同屏幕宽度响应更可靠。
关键不是“怎么写”，而是“怎么设断点+怎么配 grid-template-columns”。别硬写死列数，用 repeat(auto-fill, minmax(...)) 让浏览器自己算：
ul.product-grid {
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
说明：minmax(140px, 1fr) 表示每列最小 140px（保证小屏下至少能看清商品图），最大占满可用空间；auto-fill 确保空列也占位，避免最后一行被拉宽。
常见错误：
- 写成
repeat(3, 1fr)—— 所有屏幕都强行三列，小屏溢出或图片被压扁 - 漏掉
grid-gap却用margin模拟间距 —— 导致最后一列右侧多出空白 - 没给
img设width: 100%; height: auto;—— 图片原始尺寸破坏网格对齐
适配 iPhone SE / Android 小屏的关键是 minmax() 下限值
很多宫格在 iPhone 12 上正常，但在 iPhone SE（375px 宽）上变成一列超宽图+两列窄图，本质是 minmax() 的最小值设高了。实测：140px 是安全下限（含内边距后图片主体约 120px 宽，仍可辨识 SKU 和主视觉）。
如果业务要求小屏必须双列（比如带价格标签需横向对比），可微调：
@media (max-width: 375px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
grid-gap: 8px;
}
}
注意：repeat(2, 1fr) 比 repeat(auto-fill, minmax(160px, 1fr)) 更可控——小屏计算精度有限，auto-fill 在极窄容器里可能退化为单列。
性能提示：这类媒体查询无需 JS 注入，纯 CSS 即可生效，且浏览器解析开销远低于 JS 动态重排。
图片高度不一致导致宫格“阶梯状”？用 align-items + aspect-ratio
商品图原始尺寸五花八门，光靠 object-fit: cover 只能裁剪，不能统一高度。Grid 容器默认 align-items: stretch，但子项若没设高，就会按内容撑开。
推荐组合方案：
- 给图片容器（如
.product-item）设固定宽高比：aspect-ratio: 3/4; - 同时启用
align-items: start;防止文字描述被顶出可视区 - 图片本身加
width: 100%; height: 100%; object-fit: cover;
兼容性提醒：aspect-ratio 在 iOS 15.4+、Android Chrome 89+ 支持良好；老版本可回退为 padding-top: 133.33%;（对应 3/4）+ position: relative; + 绝对定位图片。
微信内置浏览器里 grid-gap 失效？加 gap 并补前缀
部分低版本微信 WebView（尤其 X5 内核）会忽略 grid-gap，但认 gap。这不是 bug，是规范演进遗留：早期 grid-gap 是 Grid 专属，后来统一为通用 gap 属性。
稳妥写法：
.product-grid {
display: grid;
gap: 12px; /* 必须写在 grid-gap 前面 */
grid-gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
另外，iOS 14.5 以下 Safari 需要 -webkit-gap: 12px;，虽然现在占比极低，但电商项目上线前建议扫一遍真机。
真正容易被忽略的是：当宫格嵌套在 position: fixed 或 transform 元素里时，某些安卓机型 Grid 会渲染错乱——此时应把宫格提到更高层级，或改用 Flexbox 降级方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
