电商商品列表需用CSS Grid实现响应式布局，配合aspect-ratio和object-fit确保图片不变形，通过grid-template-columns自适应列数，统一gap控制间距，严格规范价格层级与按钮交互反馈，并注意line-clamp兼容性及卡片最大宽度限制。
电商商品列表不是“堆卡片”那么简单，关键在响应式布局、视觉层级控制和交互反馈的协同——没处理好 aspect-ratio 和 object-fit，图片就容易拉伸变形；忽略 grid-auto-rows 的隐式行高，多行文字就会撑乱对齐。
用 CSS Grid 控制商品卡片网格流，别硬写 float 或 inline-block
传统浮动或 display: inline-block 在商品数量动态变化、文字长度不一时极易错位，且响应式断点要反复重写。CSS Grid 更可控：
-
display: grid配合grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))，让列数随容器自适应，不用媒体查询也能适配手机/平板/桌面 - 加
gap: 16px统一内外边距，比用margin模拟更可靠（避免首行/末行多出空白） - 若需固定三列（如 PC 端），直接写
grid-template-columns: repeat(3, 1fr)，但必须配合min-width容器限制，否则小屏会压缩过窄
商品图统一比例 + 裁剪，避免 img 拉伸或留白
用户上传图尺寸千差万别，直接设 width: 100%; height: 200px 会导致变形或模糊。正确做法是：
- 容器（如
.product-image）设aspect-ratio: 4/3或aspect-ratio: 1/1，再加overflow: hidden -
img内部用width: 100%; height: 100%; object-fit: cover，确保居中裁剪、不缩放失真 - 禁用
vertical-align（默认 baseline 会引发底部空隙），改用display: block或align-items: start（在 flex/grid 容器中）
价格与按钮的视觉权重必须可预测，别靠颜色硬扛
价格、促销标签、加入购物车按钮的层级一旦混乱，用户会漏看关键信息。重点不是“怎么好看”，而是“怎么不被忽略”：
立即学习“前端免费学习笔记（深入）”；
- 原价用
text-decoration: line-through; color: #999，现价用加粗 + 更大字号（如font-size: 1.25rem; font-weight: 700），并确保色差满足 WCAG AA 对比度（#e22对#fff是安全的） - “加入购物车”按钮必须有明确状态反馈：默认态用
background-color: #ff6b35，悬停加transform: translateY(-2px)，点击时用:active { transform: scale(0.98) }提供按压感 - 禁用纯图标按钮（如仅用购物车 SVG），至少搭配文字或
aria-label，否则读屏器无法识别
最常被跳过的细节是商品标题的截断逻辑——用 line-clamp 要检查 Safari 兼容性（iOS 16+ 才支持无前缀），旧版本得回退到 JS 截断或固定行高 + overflow: hidden。另外，所有商品卡片的 max-width 建议设为 360px 左右，再宽会导致移动端单列过满、阅读吃力。
