不能用 table 做卡片布局，因其语义错误、可访问性差、响应式失效，且现代 CSS（Grid/Flex）已完全替代；推荐用 Grid 实现自适应网格，辅以 Flex 优化内部结构。

别用

做卡片排版——它语义错误、可访问性差、响应式失效，且现代 CSS 已完全替代。

为什么不能用 table 做卡片布局

表格标签（

、、/

）的语义是「展示二维关系型数据」，比如课程表、价格对比。把产品卡片塞进

里，等于告诉屏幕阅读器「这是一格数据，不是内容模块」，会导致标题层级丢失、按钮角色被忽略、键盘导航顺序错乱。

• 响应式几乎不可行：display: table-cell 在小屏下无法换行，只能横向滚动或内容溢出
• 等高是假象：靠表格隐式拉伸实现，一旦图片加载失败或文字超长，整行卡片立刻错位
• gap、auto-fit、aspect-ratio、flex-grow 全部不生效
• 增删卡片必须改 HTML 结构（加

），无法纯靠 CSS 控制列数

用 Grid 实现自适应卡片网格

这是当前最推荐的方式，一行声明就能解决列数适配、等高、间隙控制三大问题。

• 基础写法：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))——小屏单列，中屏双列，大屏自动填满，无需媒体查询
• 统一间距：gap: 1.5rem 替代所有 margin，避免外边距合并和父容器溢出
• 等高保障：grid-auto-rows: 1fr 或固定高度（如 250px），防止内容差异导致错位
• 卡片自身结构要稳：每张
  内部需用 display: flex; flex-direction: column + flex-grow: 1 + margin-top: auto 控制底部按钮贴底，否则文字长度一变，按钮就会上下跳动

  用 Flexbox 作为降级或轻量场景方案

  Flexbox 不适合复杂卡片列表，但在满足特定条件时仍可用：卡片极少（≤4）、高度一致、不需响应式列数变化、且内部需精细内联对齐（如图标+文字+徽标横排）。

  

  DeepBI DHTML 页面生成器

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

  下载

  • 关键样式：display: flex; flex-wrap: wrap; gap: 1rem
  • 单卡宽度控制必须明确：flex: 0 0 calc(33.333% - 1rem)（三列）或 flex-basis: 300px，否则内容撑开会破坏列数
  • IE11 兼容需求下，可用 @supports not (display: grid) 条件样式降级为 Flex，但绝不要退回到
  • Flex 的 align-items: stretch 在多行时无效，垂直对齐要用 align-content，但它在单行时不生效——这个细节常被误设却没反应

  真正容易被忽略的点不在外层布局语法，而在卡片内部结构是否稳定：无论用 Grid 还是 Flex，只要卡片自身没用 flex-column + flex-grow 控制内容流，文字增减就会导致视觉跳动——而

  根本无法解决这个问题。