不能用 table 排商品卡片，因其语义错误（商品是独立内容单元而非行列数据）、响应式断裂（小屏强制横向滚动）、可访问性差（爬虫和读屏器无法识别标题/价格/按钮逻辑），且维护成本高；应改用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 配合 gap 实现真正响应式栅格。

用 display: grid 做商品卡片排版，比 flex 更稳、比 table 更语义正确，且一行代码就能适配从手机到 4K 屏。

为什么不能用 table 排商品卡片

商品不是行列对齐的参数表，而是独立可索引的内容单元。table 强行套用会导致三类硬伤：

• 小屏必须横向滚动，overflow-x: auto 没法解决语义断裂
• 爬虫和读屏器把商品当“数据格”，无法识别标题/价格/操作按钮的逻辑关系
• 加个新字段就得改 和所有 ，JS 动态渲染时容易漏嵌套层级

  真实项目里看到

  ...，基本可以判定是早期模板硬搬或维护停滞。

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 怎么写才不翻车

  这是目前最实用的商品栅格声明，但漏掉一个细节就白配：

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载
  • 必须配合 gap: 16px，别用 margin 模拟间距——否则父子 margin 合并导致首行/末行错位
  • minmax(280px, 1fr) 中的 280px 是最小列宽，不是固定宽；若容器宽度不足 280px × 3，它会自动缩成 2 列甚至 1 列
  • IE11 不支持 auto-fill，如需兼容，得 fallback 到 flex-wrap + flex-basis: 280px，并加 @supports not (display: grid) 包裹
  • 别在父容器上设 width: 100% 却忘了 max-width，否则大屏下卡片被拉得太宽，图片 object-fit: cover 也救不回构图

  卡片内部结构该用 article 还是 div

  取决于这张卡片是否具备独立语义：

  • 有独立 URL、可被 RSS 抓取、需 SEO 提权 → 必须用 article，且内部至少含一个 h3 标题
  • 只是首页轮播图下的静态推荐位，无元数据、不单独分享 → div role="article" 足够，比硬套 article 更干净
  • 用 section 包裹整组商品时，必须带 h2 主标题，否则大纲层级断裂，读屏器会跳过整个商品区
  • JS 动态注入内容时，初始状态用 div，等数据加载完成再用 replaceWith() 替换为 article，避免骨架屏阶段语义污染

  img 的 srcset 和 sizes 配错了会怎样

  常见现象：小屏加载 1200w 图片，首屏时间翻倍，LCP 直接超标。

  • srcset 里每个图必须标 w 单位，比如 "prod-400w.jpg 400w"，漏掉 w 整个属性失效，浏览器退回只用 src
  • sizes 不是像素值，而是媒体条件 + 宽度描述，例如 sizes="(max-width: 768px) 100vw, 300px" —— 表示小屏占满视口，大屏固定 300px 宽
  • 没写 sizes 时，浏览器按默认 100vw 猜测，结果小屏也加载大图，这是最典型的带宽浪费点
  • 别用 background-image 替代 img，否则爬虫抓不到图，读屏器读不出 alt，srcset 全白搭

  真正难的不是写出这行代码，而是想清楚“这张图在页面里到底占多宽”——这个判断一旦出错，响应式就从优化变成负优化。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！