用 display: grid 配合 auto-fit + minmax() 实现移动端商品卡片列表最省心，因 Grid 每列宽度独立计算、自动退化单列、避免 Flex 换行错位及 gap 兼容问题。
移动端商品卡片列表，直接用 display: grid 配合 auto-fit + minmax() 最省心，比 Flex 更稳、更少踩坑。
为什么不用 flex-wrap 做移动端多列？
Flex 在小屏上容易因内容高度不一导致换行错位，尤其当某张卡片标题超两行、价格位置浮动时，flex-basis 计算会失准；gap 在旧版 Safari（14.1 以下）也不支持，得 fallback 到 margin，又得处理 :last-child。而 Grid 的 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 能自动退化为单列，且每列宽度独立计算，不受相邻项影响。
- 最小列宽设为
280px，在 iPhone SE（375px 宽）下自然只排 1 列 - 避免写死
repeat(2, 1fr)—— 大屏 iPad 可能留白，小屏安卓机可能溢出 - 别给父容器设
width: 100%后再加max-width，直接用max-width: 100%+padding: 0 16px更安全
图片加载抖动必须防，否则用户滑动时会跳
商品图异步加载完成前，<img alt="移动端HTML商品卡片列表怎么布局" > 高度为 0，卡片塌陷，页面重排——这不是 CSS 能修的，得从结构占位入手。
- 首选
aspect-ratio: 3/4（Chrome 103+、Firefox 98+、Safari 15.4+ 支持），加在.product-card或.product-img上 - 兼容老浏览器：用伪元素撑高，比如
.product-card::before { content: ""; display: block; padding-top: 133%; }，再把图片设为position: absolute - 慎用
width/height内联属性——它强制拉伸，object-fit: cover才保比例
语义和可访问性不能省，否则上线后被投诉
用 <article></article> 包每张商品卡，不是 <div>；价格用 <code><strong></strong> 或带 aria-label 的 <span></span>；所有商品图必须有非空 alt。
立即学习“前端免费学习笔记（深入）”；
-
<article class="product-card"></article>告诉屏幕阅读器这是个独立内容单元，SEO 也认 -
<h3 class="product-title"></h3>是正确层级，别用<h2></h2>或<div role="heading"> <li> <code><button type="button" class="add-to-cart"></button>而非<a href="#"></a>，防止意外跳转或刷新 - 懒加载统一加
loading="lazy"，但首屏 2–3 张建议去掉，避免白屏
真正容易被忽略的是图片占位方案和 <article></article> 语义——前者影响滑动体验，后者一旦漏掉，上线后可能被无障碍审计直接打回。
