用 css grid 布局商品列表等模块，推荐 display: grid 与 repeat(auto-fill, minmax(280px, 1fr)) 实现自适应列数，避免使用 table；fallback 用 flexbox；gap 替代 margin 控制间距；aspect-ratio 或伪元素解决图片占位；srcset + sizes 优化图片加载；导航用 flex-wrap + details/summary 实现响应式折叠。
用 CSS Grid 做主内容区栅格，别碰 table
电商首页的商品列表、活动横幅、分类入口这些模块，天然适合二维排列。直接用 display: grid 配合 repeat(auto-fill, minmax(280px, 1fr))，就能让列数随容器宽度自动增减：最小列宽 280px，超出就加一列。移动端单列、平板两列、桌面三列或四列，全靠这一行代码驱动。
常见错误是还在用 <table> 布商品卡片——它语义错（表格该展示数据，不是布局）、响应式难（<code>colspan 在小屏下完全失控）、可访问性差（屏幕阅读器会逐单元格读，打断逻辑流）。
IE11 不支持 auto-fill 和 minmax()？那就 fallback 到 Flexbox：display: flex; flex-wrap: wrap;，再给每个卡片设 flex-basis: 280px;，效果接近，兼容性拉满。
gap 比 margin-bottom 更可靠
用 gap: 16px 控制商品卡片间距，比给每个 .product 加 margin-bottom: 16px 强得多。原因很实在：父子元素的 margin 会合并，最后一行卡片下方可能多出一倍空白；而 gap 是网格/弹性容器的原生属性，只作用于项目之间，不穿透、不继承、不合并。
横向滚动栏（比如“猜你喜欢”）也一样：用 gap: 12px 替代 margin-right，能彻底避开 :last-child 修复和 Safari 旧版 flex-gap 缺失的问题。
图片高度不一致？别靠 JS 算，用 CSS 占位
商品图异步加载时，<img> 高度为 0，卡片突然塌陷，用户正在滑动就会跳一下——这不是布局问题，是占位缺失。
现代方案：.product { aspect-ratio: 3/4; }（Chrome 103+、Firefox 98+ 支持），浏览器直接按比例预留空间；老浏览器 fallback 用伪元素撑开：.product::before { content: ""; display: block; padding-top: 133.33%; }，再把图片设为 position: absolute;。
别指望 max-width: 100% 就完事。真要兼顾清晰度和带宽，必须组合用 srcset 和 sizes。漏写 sizes？浏览器默认按 100vw 计算，高 DPR 屏很可能加载 3x 大图——这是最隐蔽的性能坑。
导航栏用 Flexbox，但得管好换行和折叠逻辑
主导航项数量不确定（比如运营临时加个“开学季”入口），用 display: flex; flex-wrap: wrap; 最稳妥。关键点在于：别让导航在中屏（如 iPad）上断成两行还留大片空白，得加媒体查询控制换行阈值。
移动端必须收起导航？别手写 JS 控制 display 切换，用 details/summary 语义化原生方案更轻量：<details class="nav-toggle"><summary>☰</summary><nav>...</nav></details>，再配点 CSS 过渡，体验不输 JS 方案，还不怕 JS 加载失败。
复杂点往往不在布局本身，而在图片占位、资源加载时机、以及降级路径是否真正可用——这些地方没做实，再漂亮的 Grid 布局也会在真实用户手里翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
