必须给根容器设 display: grid，否则 grid-template-areas 等所有 grid 属性失效；字符串中每行用引号包裹、空格分隔列名，名称须与 grid-area 值严格一致；. 表示空单元格；需为容器设置 min-height 或 height 以支撑 fr 单位和图表高度。
直接用 grid-template-areas 搭，比手算行列快、易维护、改起来不懵。
必须给根容器设 display: grid
很多人写完 grid-template-areas 没反应，根本原因是忘了在最外层容器（比如 <main class="dashboard"></main>）上加 display: grid。Grid 不靠子元素声明生效，只作用于直系子元素，且必须从容器层启用。
- 错误写法：
<header></header>或<aside></aside>上加display: grid—— 它们不是布局根容器 - 正确位置：包裹整个看板的
<div class="dashboard"> 或 <code><main></main> - 漏掉这行，
grid-area、fr、gap全部失效，页面塌成一列 - 典型写法：
grid-template-areas: "header header header" "nav main chart" "footer footer footer" -
grid-area: user-list✅，不能写成grid-area: "user list"❌（含空格会解析失败） -
.表示空单元格，比如中间留白："header header ." "nav main chart" - IE11 不支持该语法，如需兼容，得改用
grid-column/grid-row手动定位 - PC端推荐三行三列结构：
"header header header" "nav main chart" "stats stats footer" - 移动端可压缩为单列：
@media (max-width: 768px) { .dashboard { grid-template-areas: "header" "nav" "main" "chart" "stats" "footer"; } } - 避免在
grid-template-areas中混用fr和固定值；列宽统一用minmax(300px, 1fr)更稳妥 - 图表容器（如 ECharts 或 Chart.js 容器）建议设
height: 100%并确保父级有明确高度（比如grid-row: 2 / 3或min-height: 400px）
grid-template-areas 的字符串格式别写错
每组引号代表一行，空格分隔列，名称必须和子元素的 grid-area 值完全一致（大小写、连字符、无空格）。
看板常用区域划分与响应式调整
数据看板通常包含顶部状态栏、左侧导航、主图表区、右侧指标卡、底部统计栏——这些用 grid-template-areas 一眼就能对齐，但需注意不同屏幕下的行为差异。
真正容易被忽略的是：Grid 容器本身没有默认高度，如果子项全是内容撑开的，grid-template-rows 里的 auto 或 1fr 就没意义——得给容器设 min-height 或 height，否则图表、卡片会塌缩。
