用 grid-template-areas 命名区域可提升仪表盘布局的可维护性与响应式适配效率，配合 1fr 行高、flex 布局卡片内容、subgrid 对齐多层结构及 grid-auto-flow: row dense 防止元素溢出。
直接用 grid-template-areas 定义区域，比手动算行列线快得多，也更抗改。 复杂仪表盘最怕改一列崩全页，命名区域把视觉结构“画”出来，HTML 元素只管对号入座，改布局不用动 JS 或 HTML 结构。
grid-template-areas 字符串怎么写才不报错
必须保证每行引号内单词数一致，缺位用 . 占位；区域名只能是合法标识符（字母/数字/下划线，不能以数字开头，不能含中划线）；大小写严格匹配。
-
grid-template-areas: "header header sidebar" "main main sidebar" "footer footer footer";✅ 列数统一为 3 -
grid-template-areas: "header header" "nav main" "footer";❌ 第三行只有 1 个词，声明无效，整个 grid 布局会退化为默认流 -
.sidebar-left { grid-area: sidebar-left; }❌ 区域名含中划线，CSS 解析失败；应写sidebar_left或sidebarLeft - 移动端适配时，
@media (max-width: 768px)内重写grid-template-areas即可，比如改为"header" "nav" "main" "sidebar" "footer"
如何让卡片在 grid 中等高但不撑开内容
卡片高度由网格轨道决定，不是由自身内容撑开。关键在 grid-template-rows 和子元素的 height/min-height 控制逻辑。
- 父容器设
grid-template-rows: auto 1fr auto;，中间行用1fr吸收剩余空间，卡片放进去自然等高 - 卡片内部内容若需“顶部对齐+底部留白”，不要给卡片设
height: 100%，而用display: flex; flex-direction: column;+justify-content: space-between; - 避免对卡片设
min-height，否则小屏下可能溢出；改用min-height: 0;配合overflow: hidden;更安全 -
gap比margin更可靠——它不参与盒模型计算，不会触发双倍边距或塌陷
嵌套子网格（subgrid）什么时候值得用
只有当你需要**多层卡片内部结构严格对齐父网格列线**时才启用 subgrid，比如监控面板里所有指标卡的标题栏、数值区、趋势图必须纵向对齐。普通仪表盘多数场景不需要。
立即学习“前端免费学习笔记（深入）”；
- 父网格已定义
grid-template-columns: 200px 1fr 1fr;，子卡片想让内部三个区块（label/value/chart）分别对齐这三列 → 用grid-template-columns: subgrid; - 浏览器兼容性注意：
subgrid在 Safari 16.4+、Chrome 111+、Firefox 111+ 支持，旧版需降级为固定宽度或 JS 补齐 - 别在子卡片上同时写
grid-template-columns和subgrid—— 二者互斥，后者会覆盖前者 - 如果只是让卡片内文字居中、图标右对齐，用
justify-content和text-align就够了，不用 subgrid
真正容易被忽略的是 grid-auto-flow 的隐式行为：没显式指定 grid-area 的元素，不会自动塞进空闲区域，而是堆在最后一行外侧。仪表盘里动态插入的告警卡片，必须手动设 grid-area 或统一用 grid-auto-flow: row dense;，否则它们会“消失”在视口下方。
