移动端商品网格需确保列数自适应、图片比例守恒、卡片高度齐平；用repeat(auto-fit, minmax(320px, 1fr)))实现响应式列数，配合aspect-ratio+object-fit保图不畸变，Subgrid实现底部对齐，gap替代margin控间距，并严格设置viewport与box-sizing。
移动端商品网格不是靠“加个媒体查询”就完事的，关键在列数自适应逻辑是否健壮、图片比例是否守得住、卡片高度是否齐平——这三点崩一个，列表就错位或留白。
用 repeat(auto-fit, minmax(320px, 1fr))) 替代固定列数
写死 repeat(4, 1fr) 在手机上会把卡片压成细条，而 minmax(320px, 1fr) 配合 auto-fit 才真能响应：
-
320px是 iPhone SE 屏宽下卡片最小可读宽度，低于它浏览器自动换行 -
auto-fit会折叠空轨道，比auto-fill更省空间（后者保留占位，适合 JS 动态追加） - 别漏写
grid-auto-rows: 1fr，否则多行文字撑高卡片时，相邻行不对齐 - Android 4.4–6.0 WebView 和 iOS 9–10 Safari 不支持
auto-fit，得 fallback：先写repeat(2, 1fr)，再覆盖新语法
图片不变形必须靠 aspect-ratio + object-fit
只设 width: 100% 或 height: 200px，图片一拉就糊。真正稳的是：
- 给图片容器（如
<div class="product-img">）设aspect-ratio: 16/9，不用 JS 算高 - 图片本身加
object-fit: cover，裁剪居中，不拉伸 - 别用
background-image模拟图——它不支持aspect-ratio，且 SEO 和可访问性差 - 旧浏览器（iOS 11 以下）不支持
aspect-ratio，可用伪元素 padding-top hack 降级
卡片底部对齐要用 Subgrid，别硬塞 margin-top: auto
价格和按钮总在卡片底部对齐？传统做法是给标题加 flex: 1 或用 margin-top: auto，但文字长度一变就失效。Subgrid 是解法：
立即学习“前端免费学习笔记（深入）”；
- 外层网格设
display: grid和grid-template-rows: auto 1fr auto - 卡片内元素设
display: subgrid，直接继承父网格轨道 - 价格和按钮统一放第三行轨道，天然对齐，不管标题几行
- 注意：Subgrid 目前仅 Chromium 111+ 和 Safari 16.4+ 支持，Firefox 仍实验阶段；不支持时 fallback 为
grid-auto-rows: minmax(200px, auto)+align-items: end
gap 和 margin 混用会导致间距翻倍
看到卡片之间空隙过大？大概率是 gap: 16px 和子元素的 margin-bottom: 8px 叠加了：
-
gap是网格项之间的净间距，不参与盒模型计算；margin是元素自身边距，会撑开容器 - 按钮、价格标签这些子元素，一律清空
margin，靠gap控制整体节奏 - 如果必须用
margin（比如外部组件库），就在网格容器上加overflow: hidden截断溢出，避免横向滚动条 - 所有网格父容器必须设
box-sizing: border-box，否则padding会吃掉gap空间
最易被忽略的是：viewport meta 标签漏写或写错，<meta name="viewport" content="width=device-width, initial-scale=1"> 少一个字母，整个网格在 iOS 上就缩放失常。这不是 CSS 问题，但会让所有 Grid 布局失效。
