仪表盘应使用 display: grid 实现二维布局，优先采用 grid-template-areas 定义区域，配合 gap 控制间距，响应式时重写 template-areas，嵌套 Grid 用于局部精确控制。
用 display: grid 定义仪表盘整体结构
仪表盘本质是固定区域划分，不是靠浮动或 Flex 堆出来的——Grid 天然适合这种二维布局。关键在 grid-template-areas 或 grid-template-rows/grid-template-columns 的组合使用，而不是只靠 grid-auto-flow 让浏览器猜。
- 优先写
grid-template-areas，直观对应视觉区块，比如"header header header" "nav main sidebar" "footer footer footer" - 每个区域名必须和子元素的
grid-area值严格一致，大小写、空格、引号都不能错 - 避免用
fr单位填满所有列/行——仪表盘常需固定侧边栏（如240px）+ 自适应主内容（1fr），混合单位更可控 - 如果某块区域要跨行跨列，直接在
grid-template-areas里重复写区域名，比如"header header header" "nav main main" "nav sidebar sidebar"
让面板有呼吸感：间距与边框不能靠 margin 硬推
仪表盘里一堆卡片堆一起，靠子元素加 margin 排列极易错位，尤其响应式时。Grid 的 gap 是唯一干净解法。
-
gap作用于网格容器，自动在所有轨道间插入等距间隙，不破坏grid-area定义 - 别用
padding模拟间隙——它会撑大单个面板，导致内容区变窄，且无法统一控制行列间隔 - 若需不同方向不同间距，用
row-gap和column-gap分开设，比如row-gap: 16px; column-gap: 24px; - 注意
gap不影响第一行前、最后一行后、最左列前、最右列后的空白——那得靠容器自身的padding
响应式断点下，grid-template-areas 要重写，不是微调
手机屏上把「侧边栏+主内容」压成上下排列？别试图用 grid-column: 1 / -1 临时覆盖，直接换一套 grid-template-areas 更稳。
- 在
@media里重写整个grid-template-areas，比如从"header nav main sidebar"变成"header" "nav" "main" "sidebar" - 别指望用
grid-row/grid-column在小屏逐个调整——几十个面板时维护成本爆炸 - 如果某些区域在小屏要隐藏（如广告位），让它对应的
grid-area名在新模板里彻底消失，浏览器自然跳过渲染 - 测试时重点看区域名是否拼错、引号是否闭合、换行符是否被误删——这些错误不会报错，只会让区域塌缩到左上角
嵌套 Grid 容器：仪表盘里的「局部精确控制」
主布局用 Grid 划分大区，但某个「数据概览」面板内部还要分四宫格？别退化成 Flex 或绝对定位，继续用 Grid。
立即学习“前端免费学习笔记（深入）”；
- 给该面板本身设
display: grid，它就变成独立子网格，父级的gap或template完全不影响它 - 子网格可自由用
repeat(2, 1fr)、minmax(200px, 1fr)控制内部弹性，和外层无关 - 警惕过度嵌套：三层以上 Grid 容器会让 CSS 难以追踪，优先考虑是否真需要独立轨道，还是用
gap+display: contents更轻量 - Chrome DevTools 的 Layout 面板里勾选 “Show grid areas”，能实时看到每个
grid-area是否按预期渲染
真正难的不是写出第一版 Grid 布局，而是当产品提“这个图表宽一点”“那个按钮下沉半行”“移动端折叠导航后留白太大”时，你能否三秒内定位到该改哪一行 grid-template-areas、哪个 gap、或者哪个嵌套容器的 minmax —— 这些地方一旦写死像素值或硬编码行列数，后续每次调整都像在拆炸弹。
