应避免用table做商品列表，因其语义错误、响应困难且读屏器无法识别；推荐用display: grid实现等宽流式栅格，配合grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))和gap控制间距，图片需固定高度+object-fit裁剪，ie11降级用flex-wrap，横向滚动栏用flex+overflow-x:auto+white-space:nowrap，商品单元用并确保标题、srcset/sizes、价格语义正确。
别用 table 做商品列表——语义错、响应难、读屏器读不出“这是个商品”，不是技术限制，是结构误用。
用 display: grid 实现等宽流式栅格
这是当前最直接、可控的方案，尤其适合首页或分类页这类多列陈列场景。
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))：列宽不小于 280px，容器够宽就自动加列，不用写死列数 -
gap: 16px统一控制卡片间距，比给每个卡片加margin-bottom更可靠（避开 margin 合并） -
.product img { height: 180px; object-fit: cover; }固定高度 + 裁剪居中，防拉伸变形 - IE11 不支持
auto-fill？降级用display: flex; flex-wrap: wrap;+flex-basis: 280px
用 display: flex 做横向滚动推荐栏
适合单行、可滚动、卡片宽度固定的场景，比如“猜你喜欢”“相关商品”。
- 必须三件套：
display: flex+overflow-x: auto+white-space: nowrap（否则卡片会换行） - 每张卡片设
flex: 0 0 240px（不放大、不缩小、固定宽），再加margin-right: 12px - 最后一项去边距：
.product:last-child { margin-right: 0 }，或改用gap: 12px（Safari 14.1+ 支持） - 加
scroll-behavior: smooth提升滚动体验
语义和图片加载不能省
结构松散或图片加载失控，会让页面在小屏或弱网下直接失效。
- 商品单元优先用
<article></article>，内部必须有标题（<h3></h3>或更高），否则语义断裂 -
<img>必须配srcset和sizes：sizes="(max-width: 768px) 100vw, 300px"告诉浏览器“这张图在页面里大概占多宽”，漏掉它，小屏也加载大图 -
srcset中每个图必须标400w单位，漏掉 w，整个属性失效 - 价格用
<del></del>标原价、<strong></strong>标折后价，并加aria-label明确语义
真正卡住人的不是布局写法，而是语义没对齐、图片没响应、卡片没边界——这些细节不补上，再漂亮的 grid 也会在 iPhone 上崩成一行或撑破视口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
