推荐用 grid 实现等宽自适应商品栅格，核心是 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 配合 gap 控制间距；flex 适用于横向滚动或单列场景，需注意兼容性与 margin 处理；图片抖动须通过 aspect-ratio、伪元素撑高或宽高属性预防。
直接用 display: grid 或 display: flex 布局商品卡片，别碰 <table>——它语义错、响应式难、可访问性差，现代项目里纯属自找麻烦。
<h3>用 <code>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
用 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提升滚动体验
图片加载导致布局抖动怎么防
商品图异步加载时，<img alt="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中如何制作产品展示页的布局" >上写width和height属性（如width="300" style="max-width:90%"），浏览器会按比例计算占位
真正容易被忽略的是图片占位和 IE11 兼容路径——前者影响用户体验，后者一旦漏掉，上线后可能直接白屏；而 table 布局看似简单，实际维护成本远高于初期省下的那几行代码。
