现代商品卡片布局首选display: grid配合repeat(auto-fill, minmax(280px, 1fr))，移动端单列、平板两列、桌面三列自适应，用gap统一间距；ie11需降级为flex-wrap方案。
直接用 display: grid 或 display: flex 布局商品卡片，别碰 <table>——它语义错、响应式难、可访问性差，现代项目里纯属自找麻烦。
<h3>用 <code>grid-template-columns: repeat(auto-fill, minmax()) 实现等宽自适应栅格
Grid 是目前最干净的多列商品布局方案，尤其适合固定列数+自动换行的场景。关键不是写满 grid-template-areas，而是靠 repeat(auto-fill, minmax(280px, 1fr)) 动态生成列。
- 列数随容器宽度自动增减：最小列宽设为
280px，超出就新增一列 - 行间距统一用
gap: 16px，比给每个.product加margin-bottom更可靠（避免父子 margin 合并） - 图片高度不一致？加
.product img { height: 180px; object-fit: cover; }，防止拉伸变形 - IE11 不支持
auto-fill和minmax，如需兼容，得 fallback 到flex-wrap+flex-basis
用 flex 做横向滚动或单列首屏展示
Flex 更适合横向滚动商品（比如“猜你喜欢”栏），或移动端首屏只排一列的极简场景。它的优势是逻辑直白、兼容性好，但跨行控制弱。
- 横向滚动必须加三件套：
display: flex+overflow-x: auto+white-space: nowrap（否则换行） - 每张卡片设
flex: 0 0 240px（不缩放、不增长、固定宽），再加margin-right: 12px - 最后一项的
margin-right会露白边？用:last-child { margin-right: 0 }或更稳妥的gap（但 Safari 14.1 以下不支持 flexgap） - 别忘了
scroll-behavior: smooth提升滚动体验
防图片加载抖动：提前占位比等 JS 渲染更可靠
商品图异步加载时，<img> 高度为 0，卡片突然塌陷，用户正在滑动就会跳一下。这不是 CSS 能解决的，得从 HTML 结构入手。
- 给
.product设固定aspect-ratio: 3/4（Chrome 103+、Firefox 98+ 支持） - 老浏览器 fallback：用伪元素撑开容器，例如
.product::before { content: ""; display: block; padding-top: 133%; }，再把图片设为position: absolute - 或者直接在
<img>上写width="300" style="max-width:90%"，浏览器会按比例预留空间
响应式图片不能只靠 max-width: 100%
基础自适应只是第一步。真要兼顾清晰度、带宽和裁剪意图，得组合用 srcset、sizes 和 <picture></picture>。
-
srcset提供多尺寸源文件，sizes告诉浏览器“这张图在不同断点下占多宽”，两者配合才能让高 DPR 屏加载 2x 图 - 忘记写
sizes？浏览器默认按 100vw 计算，大概率加载大图——这是最常见却最难察觉的性能坑 - 需要切换构图（如移动端竖版特写 / 桌面横版全景）？必须用
<picture></picture>，<img>做不到 - 装饰性背景图建议用 CSS + 媒体查询，而非
<img>标签，避免语义污染和额外 DOM 节点
真正卡住项目的往往不是 grid 怎么写，而是图片占位没做、sizes 漏写、或为了兼容 IE11 硬塞 table——这些细节不提前想清楚，上线后改起来比重写还费劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
