现代商品卡片布局应优先使用 display: grid 或 display: flex，禁用 table；Grid 适合等宽自适应栅格，用 repeat(auto-fill, minmax(280px, 1fr)) + gap 实现响应式；Flex 适合横向滚动，需配合 overflow-x: auto 和 flex: 0 0 240px；图片需占位防抖动，aspect-ratio 或伪元素 fallback；避免 float 和 absolute 布局商品主结构。
直接用 display: grid 或 display: flex 布局商品卡片，别碰 <table>——它语义错、响应式难、可访问性差，现代项目里纯属自找麻烦。
<h3>用 <code>display: grid 实现等宽自适应商品栅格
Grid 是目前最干净的多列商品布局方案，尤其适合固定列数+自动换行的场景。关键不是写满 grid-template-areas，而是靠 repeat(auto-fill, minmax(...)) 动态生成列。
- 列数随容器宽度自动增减：用
grid-template-columns: 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
用 display: 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 以下不支持 flex gap） - 别忘了
scroll-behavior: smooth提升滚动体验
图片加载慢导致布局抖动？提前占位很关键
商品图异步加载时，<img alt="HTML怎么做产品展示页_html产品展示页面布局教程【完整版】" > 高度为 0，卡片突然塌陷，用户正在滑动就会跳一下。这不是 CSS 能解决的，得从 HTML 结构入手。
立即学习“前端免费学习笔记（深入）”；
- 给
.product设固定 aspect-ratio，比如aspect-ratio: 3/4（Chrome 103+、Firefox 98+ 支持） - 老浏览器 fallback：用伪元素撑开容器，例如
.product::before { content: ""; display: block; padding-top: 133%; }，再把图片设为position: absolute - 或者直接在
<img alt="HTML怎么做产品展示页_html产品展示页面布局教程【完整版】" >上写width和height属性（如width="300" style="max-width:90%"），浏览器会按比例预留空间
float 和 position: absolute 别乱用
这两个属性在商品展示页里几乎没正当理由出现。用它们的结果通常是：换设备错位、内容重叠、SEO 抓取失败、屏幕阅读器读序混乱。
-
float已被flex和grid全面替代；强行用它做多列，必须配clear: both，稍有遗漏就塌陷 -
position: absolute只该用于脱离文档流的浮层（比如价格标签角标、售罄遮罩），绝不能用来排商品主结构 - 如果父容器没设
position: relative，绝对定位的元素会相对于 viewport 定位，上线后可能飘到页面外边去
真正容易被忽略的是图片加载占位和 Grid 的 IE 兼容断点——很多团队测完 Chrome 就上线，结果 Windows 7 用户看到的是一堆堆叠的卡片。别假设用户都用新浏览器，降级方案得写进代码里，而不是靠“他们应该升级”。
