用 CSS Grid 实现 H5 统计看板多列平分：设容器为 display: grid，用 repeat(auto-fit, minmax(280px, 1fr))) 自适应列数，卡片为直系子元素，通过 gap 控制间距，配合媒体查询实现响应式单列/双列/四列布局。

用 CSS Grid 实现 H5 统计数据看板的多列平分，核心是让容器自动均分可用宽度，同时保持各列内容独立、响应灵活。不靠 JavaScript 计算，纯 CSS 即可完成。

1. 设置 grid-container 为 display: grid

给看板最外层容器（比如

）声明 Grid 布局，并用 grid-template-columns 控制列数与分配方式：

• 均分固定列数：例如 4 列等宽，写 grid-template-columns: repeat(4, 1fr)
• 自适应列数（推荐）：用 repeat(auto-fit, minmax(280px, 1fr)))，浏览器会根据容器宽度自动计算最多能放几列，每列最小 280px、最大均分剩余空间
• 避免换行错乱：加上 grid-auto-flow: column 可选，但通常默认 row 更符合看板从左到右排列习惯

2. 每个统计卡片设为 grid item

每个卡片（如“订单总数”“转化率”“活跃用户”）作为直接子元素，无需额外设置宽度或浮动。Grid 会自动按列顺序填入：

DeepBI DHTML 页面生成器

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

下载

• 卡片内部用 display: flex; flex-direction: column; 排布标题、数值、趋势图标等，保证垂直对齐
• 若需统一高度（比如所有卡片底部对齐），在容器加 align-items: stretch（默认值），并确保卡片内无 height: 100% 破坏自然拉伸
• 卡片之间留白用 gap: 16px（推荐），比 margin 更可控、不触发外边距合并

3. 响应式微调断点

针对小屏设备，用媒体查询减少列数，避免卡片过窄：

• 桌面端（≥1200px）：grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)))
• 平板（768px–1199px）：grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)))
• 手机（≤767px）：grid-template-columns: 1fr，单列垂直堆叠

4. 注意兼容性与实际渲染

现代主流浏览器（Chrome、Safari、Firefox、Edge）对 Grid 支持良好。H5 场景中只需注意：

• 微信内置浏览器（X5 内核）从 v6.7.5+ 已完整支持 Grid，无需额外 polyfill
• 避免嵌套过多 grid 容器，尤其在 Vue/React 动态渲染时，优先用单层 grid + 子元素语义化结构
• 调试时右键检查元素，在开发者工具中启用 “Show grid area” 可直观看到网格线分布