商品列表禁用table，应改用grid或flex布局：grid适合多列自适应陈列，flex适合横向滚动推荐栏；需重视图片占位、语义结构（article包裹）、无障碍及ie11兼容性。
别用 table 做商品列表，它不是“看起来像表格”就能用的
语义上错、响应式卡死、无障碍失效、样式越来越难维护——这些不是理论风险，是上线后立刻会暴露的问题。商品卡片是独立内容单元，table 表达的是二维关系数据（比如订单明细、库存报表），强行套用只会让后续加筛选、做动画、适配小屏时反复返工。
常见错误现象包括：小屏横向滚动、文字折行错乱、JS 批量操作时节点层级深且不统一、屏幕阅读器把每个 td 当成“单元格数据”而非“一件商品”。后台报表可以继续用 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; }防止图片拉伸变形，必须配height才生效 - 容器需有明确宽度（如
max-width: 1200px）并居中：margin: 0 auto
IE11 不支持 auto-fill 和 minmax()，如需兼容，降级为 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提升滚动体验
图片加载抖动和语义结构最容易被忽略
商品图异步加载时，img 高度为 0，卡片突然塌陷，用户正在滑动就会跳一下。这不是 CSS 能解决的，得从 HTML 结构入手：
- 现代浏览器可用
aspect-ratio: 3/4（Chrome 103+、Firefox 98+ 支持） - 老浏览器 fallback：用伪元素撑开容器，例如
.product::before { content: ""; display: block; padding-top: 133%; }，再把图片设为position: absolute - 单品必须用
article包裹，不是div或section；规格参数用dl结构化，比一堆p更清晰 - 筛选逻辑依赖
data-category属性，别靠 class 解析字符串——脆弱且易误匹配
真正容易被忽略的是图片占位和 IE11 兼容路径——前者影响用户体验，后者一旦漏掉，上线后可能直接白屏；而 table 布局看似简单，实际维护成本远高于初期省下的那几行代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
