四宫格用Grid更合适，因其本质是2×2二维矩阵布局；Grid通过grid-template-columns: repeat(2, 1fr)可自然实现，可控性强，响应式扩展（如auto-fit+minmax）也更便捷。
四宫格用grid还是flex？先看结构需求
四宫格本质是二维布局，display: grid 是更自然的选择。用 flex 强撑四宫格（比如 flex-wrap: wrap 配 gap）也能实现，但一旦涉及“每行固定2个”或“首尾对齐留白”，grid 的可控性明显更高。
- 如果设计稿明确是“2×2 矩阵”，直接上 grid-template-columns: repeat(2, 1fr)
- 如果后续可能扩展为 3×3 或响应式变为 1×4，grid 也更容易加 auto-fit 和 minmax()
- flex 在四宫格里唯一优势是旧版 Safari 兼容稍好（但 Safari 14.1+ 已支持 gap），不过现在基本不用迁就了
gap: 16px 24px 是行距 16px、列距 24px，不是上下左右
这是最常写错的点：gap 双值写法永远是 row-gap column-gap，顺序不可反。
- gap: 16px 24px → 行与行之间空 16px，列与列之间空 24px
- gap: 0 12px → 行间无空隙（适合单行四宫格），只保留列向间隔
- gap: 1rem → 行列都用 1rem，等效于 row-gap: 1rem; column-gap: 1rem
常见错误：把 gap: 12px 8px 当成“左/右/上/下”，结果列距被设成 8px，视觉上宫格横向挤在一起
对称留白 ≠ 仅靠gap，首尾边缘要靠padding补gap 只管子项之间，不管容器边缘。所谓“对称”，是指四宫格整体在容器中居中，且四周留白一致。
- 容器本身加 padding: 20px，让内容区缩进
- 再配 gap: 16px，此时宫格内部间距统一，边缘由 padding 控制
- 别试图用 margin 给每个宫格加外边距来模拟对称——会触发外边距合并、换行错位、响应式失效
- 如果需要“第一行顶部留白 = 行间距 = 底部留白”，那就用 padding-top 和 padding-bottom 分别设成和 row-gap 相同的值
Safari 14.0 以下不认 gap: 16px，降级方案要写全
Safari ≤14.0 完全忽略 gap 简写，但支持 row-gap 和 column-gap 单独声明。
- 必须写成：
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 16px;
column-gap: 24px;
/* 不要再写 gap: 16px 24px */
}
- -webkit-row-gap 和 -webkit-column-gap 在 Safari 13–14 中仍需前缀，但 14.1+ 已可省略
- 别混用：gap: 16px 和 row-gap: 20px 同时存在时，后者会覆盖前者定义的行距，列距却还是 16px，造成不对称
gap 双值写法永远是 row-gap column-gap，顺序不可反。
- gap: 16px 24px → 行与行之间空 16px，列与列之间空 24px
- gap: 0 12px → 行间无空隙（适合单行四宫格），只保留列向间隔
- gap: 1rem → 行列都用 1rem，等效于 row-gap: 1rem; column-gap: 1rem
常见错误：把 gap: 12px 8px 当成“左/右/上/下”，结果列距被设成 8px，视觉上宫格横向挤在一起
对称留白 ≠ 仅靠gap，首尾边缘要靠padding补gap 只管子项之间，不管容器边缘。所谓“对称”，是指四宫格整体在容器中居中，且四周留白一致。
- 容器本身加 padding: 20px，让内容区缩进
- 再配 gap: 16px，此时宫格内部间距统一，边缘由 padding 控制
- 别试图用 margin 给每个宫格加外边距来模拟对称——会触发外边距合并、换行错位、响应式失效
- 如果需要“第一行顶部留白 = 行间距 = 底部留白”，那就用 padding-top 和 padding-bottom 分别设成和 row-gap 相同的值
Safari 14.0 以下不认 gap: 16px，降级方案要写全
Safari ≤14.0 完全忽略 gap 简写，但支持 row-gap 和 column-gap 单独声明。
- 必须写成：
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 16px;
column-gap: 24px;
/* 不要再写 gap: 16px 24px */
}
- -webkit-row-gap 和 -webkit-column-gap 在 Safari 13–14 中仍需前缀，但 14.1+ 已可省略
- 别混用：gap: 16px 和 row-gap: 20px 同时存在时，后者会覆盖前者定义的行距，列距却还是 16px，造成不对称
gap 简写，但支持 row-gap 和 column-gap 单独声明。
- 必须写成：
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 16px;
column-gap: 24px;
/* 不要再写 gap: 16px 24px */
}
- -webkit-row-gap 和 -webkit-column-gap 在 Safari 13–14 中仍需前缀，但 14.1+ 已可省略
- 别混用：gap: 16px 和 row-gap: 20px 同时存在时，后者会覆盖前者定义的行距，列距却还是 16px，造成不对称
真正难的不是调出四宫格，而是当设计稿要求“手机端四宫格列距减半、但行距不变”时，得意识到 gap 是容器级属性——你得用媒体查询单独改 column-gap，而不是指望某个 class 能局部 override。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
