用 display: grid 做导航布局需先定义 grid-template-columns，否则 grid-column 和 grid-area 无效；推荐 repeat(auto-fit, minmax(120px, 1fr)) 应对数量变化；复合结构用 grid-template-areas 更清晰；间距统一用 gap；响应式优先调整容器行列而非重写区域。
直接用 display: grid 做导航布局，比 Flex 更可控、比 Float 更干净——但前提是别跳过定义行列结构这一步，否则所有 grid-column 和 grid-area 都会失效。
先写 grid-template-columns，再动项目定位
导航栏本质是「一行多列」的二维结构，但很多人一上来就给 .nav-item 写 grid-column: 2 / 4，结果没反应。原因很简单：容器没声明列，网格线根本不存在。
- 必须先在导航容器上设
display: grid+grid-template-columns（哪怕只是repeat(4, 1fr)） -
grid-template-rows可省略，浏览器会自动按内容撑高 - 如果导航项数量不固定，优先用
repeat(auto-fit, minmax(120px, 1fr))，避免媒体查询硬编码 - 别依赖
grid-auto-flow: column来“自动排成一行”——它不保证单行，且对齐行为难控
grid-template-areas 适合带 Logo/搜索框的复合导航
当导航不只是菜单项，还含 Logo、搜索输入框、用户头像等异构元素时，grid-template-areas 能让结构一目了然，比纯线号计算更不易出错。
- 先定义区域名：
grid-template-areas: "logo nav search user" - 每个子元素配
grid-area: logo、grid-area: nav等，顺序和命名必须严格一致 - 注意：区域名不能含空格或特殊字符，
grid-area: main-nav是非法的，得写成mainnav - 若某区域需跨列（如搜索框占两格），写成
"logo nav search search user"即可，不用额外算线号
gap 替代 margin 控制导航项间距
用 margin 给每个 .nav-item 加右距，容易导致最后一项多出空白；用 gap 是更干净的解法——它只作用于网格项之间，不污染外边距流。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 统一写
gap: 1rem，等效于旧写法grid-column-gap: 1rem（grid-gap已废弃，别再用） -
gap对display: inline-grid无效，导航容器请始终用display: grid - 如果某项需要更大间距（比如用户头像右侧留空），单独加
margin-right: 2rem，gap不会覆盖它 - IE 不支持
gap，如需兼容，降级方案是用grid-column-gap+grid-row-gap（仅限 Grid Level 1）
响应式折叠时，别重写整个 grid-template-areas
小屏下把横向导航转为汉堡菜单，很多人习惯在 @media 里重写一遍 grid-template-areas，结果维护成本飙升。其实只需改容器结构，项目层几乎不动。
- 小屏时把容器设为
grid-template-columns: 1fr+grid-template-rows: auto，所有项自然堆成一列 - 用
grid-area的命名区域仍有效，只是布局方向变了，语义没丢 - 隐藏非必要项（如搜索框）用
display: none，不是删掉 HTML——否则大屏恢复时 DOM 重建有延迟 - 真正要小心的是
fr单位在窄屏下的表现：1fr在单列下等于 100% 宽，但如果同时设了minmax(200px, 1fr)，可能触发溢出，得加overflow-x: auto
Grid 导航最难的不是写法，而是想清楚「哪些是固定结构、哪些是弹性内容」——比如 Logo 宽度是否随文字变？搜索框最小能缩到多窄？这些边界条件一旦模糊，minmax 和 auto-fit 就会反向咬人。
