结论：grid-template-areas 适用于划分语义明确、数量固定的模块（如标题区、主图区），不适用于定位单个散点；grid-column/row 用整数线号精确定位容器，SVG/Canvas 负责坐标绘制；响应式应重写整套 grid-template-areas，Grid 只搭结构，对齐与冻结等细节需内层实现。
直接说结论：用 grid-template-areas 划分功能区块，用 grid-column/grid-row 精确控制图表容器位置，所有坐标点绘制交给 SVG/Canvas，Grid 只管“格子怎么摆”，不管“点怎么画”。
为什么不能用 grid-template-areas 定位单个散点？
因为 grid-template-areas 是静态字符串映射，每个区域名只能绑定一个网格项。你要渲染 200 个折线图节点或散点图坐标，不可能写 200 行区域定义——浏览器会拒绝解析，CSS 规则整条失效。
- 拼错一个区域名（比如
maim写成main），对应元素就退化为普通流式布局，整个大屏错位 - 每行字符串列数必须严格一致，缺位得用
.占位；漏一个点，整条grid-template-areas声明被忽略 - 它适合划分“标题区”“主图区”“图例区”“指标卡区”这类语义明确、数量固定的模块，不是给像素级坐标服务的
grid-column / grid-row 必须用整数线号，负值有陷阱
grid-column: 2 / -2 看似想避开首尾两列，但若容器只有 3 列，-2 实际指向第 2 条末尾线（即第 2 列末），结果只占 1 列；若列数动态生成（如 repeat(auto-fit, ...)），负值线号行为不可控。
- 坐标系从 1 开始计数：
grid-column: 1 / 3是跨越第 1→2→3 条竖线，即占前两列，不是“第 1 列到第 3 列” - 显式定义
grid-template-columns: 240px 1fr 380px后，再用grid-column: 2 / -1才可靠；否则隐式轨道下-1可能无效 - 避免混用命名线和数字线，比如
grid-column: sidebar-start / main-end，除非你真在grid-template-columns里写了[sidebar-start] 240px [main-start] 1fr [main-end]
响应式切换别改单个 grid-column，重写 grid-template-areas
大屏在桌面端是 4×3 网格，在平板端要变成 2×6，在手机上得拉成单列滚动。如果只在媒体查询里改几个 grid-column 值，很快就会漏掉某个面板、某块指标卡叠在图例上。
- 统一用
@media (max-width: 768px)重定义整套grid-template-areas，结构一目了然 - 区域名可以复用（
main在桌面占中间两格，在移动端可设为"main"单独一行），但不能出现未声明的名称 - 移动端典型写法：
grid-template-areas: "header" "kpi-1" "kpi-2" "chart" "legend"，每行一个区域，用gap控制间距，不用height强撑
冻结表头+小数点对齐这些细节，Grid 只搭架子，对齐靠内层
报表类大屏常要冻结前两行表头、金额列右对齐且小数点垂直对齐。Grid 负责把“表头区”“数据区”“操作列”框出来，具体对齐逻辑得下沉一层处理。
- 冻结多行：第一行
top: 0，第二行必须设top: 48px（假设首行高 48px），否则重叠 - 金额列不要只靠
text-align: right，外层display: grid; grid-template-columns: 1fr max-content拆分整数/小数部分，子项内再对齐 - 右侧操作列加
position: sticky; right: 0; z-index: 10，但前提是整个表格容器是局部滚动容器（overflow-y: auto），否则 sticky 不生效
真正难的不是写出 grid-template-areas 字符串，而是当某张 ECharts 图表高度突变、或某张指标卡插入三行备注文本时，整行网格高度被撑开，导致下方所有区块错位——这时候得检查 align-items 是否还是默认的 stretch，以及有没有漏加 min-height 或 max-height 约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
