CSS Grid 实现圣杯布局需三要素：父容器设 display: grid 与 grid-template-columns；用 grid-template-areas 定义区域（引号不可省）；子元素显式设 grid-area（值严格匹配、无引号）。
用 CSS Grid 实现圣杯布局，核心是三栏结构：左右固定宽、中间自适应，且 HTML 中 main 必须前置（利于 SEO 和可访问性），视觉上却居中显示。Grid 天然支持 DOM 顺序与视觉顺序分离，不需要浮动、负边距或嵌套 hack。
基础结构必须写对这三处
缺一不可，否则整个网格会静默退化为单列流：
-
父容器设 display: grid，并显式声明
grid-template-columns（如200px 1fr 200px）——没它就没有列轨道 -
用 grid-template-areas 定义语义区域，每行单词数严格一致，引号不能省略，例如：
"header header header"<br>"left main right"<br>"footer footer footer"
-
每个子元素必须显式设 grid-area，值与 areas 字符串中完全一致、不带引号，比如
main { grid-area: main; }，写成grid-area: "main"会失效
HTML 结构按语义优先写，不按视觉顺序
把 main 放在最前面，nav 和 aside 跟在后面，这样爬虫和屏幕阅读器先读主内容：
✔ 推荐写法：<div class="container"><br> <header></header><br> <main></main><br> <nav></nav><br> <aside></aside><br> <footer></footer><br></div>
Grid 会根据 grid-area 把它们“摆”到对应位置，HTML 顺序不影响视觉排布。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
响应式切换要同步更新两处
小屏下不能只改列数，否则区域映射错乱。必须同时调整 grid-template-columns 和 grid-template-areas：
- 桌面端：
grid-template-columns: 200px 1fr 200px+"header header header" "left main right" "footer footer footer" - 移动端：
grid-template-columns: 1fr+"header" "main" "left" "right" "footer"
注意：侧边栏在小屏放 main 下方更符合阅读习惯；若需抽屉效果，应改用 position: sticky 或独立逻辑，别硬塞进同一网格。
高度撑满和等高是默认行为，不用额外处理
Grid 的 1fr 行高天然让 main 区域占满剩余空间，footer 自动贴底：
- 容器加
min-height: 100vh，body 清除默认 margin - 用
grid-template-rows: auto 1fr auto，中间行设1fr即可，不用height: 100%或伪元素清除浮动 - 所有区域自动等高，无需
overflow: hidden或其他 hack
