用 CSS Grid 实现 H5 统计看板多列平分：设容器为 display: grid，用 repeat(auto-fit, minmax(280px, 1fr))) 自适应列数，卡片为直系子元素，通过 gap 控制间距，配合媒体查询实现响应式单列/双列/四列布局。
用 CSS Grid 实现 H5 统计数据看板的多列平分，核心是让容器自动均分可用宽度，同时保持各列内容独立、响应灵活。不靠 JavaScript 计算，纯 CSS 即可完成。
1. 设置 grid-container 为 display: grid
给看板最外层容器（比如 <section class="dashboard"></section>）声明 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” 可直观看到网格线分布
