css grid 坐标定位必须用整数线号（从1开始），负值指末尾线；grid-template-areas 适合功能区分区而非动态点位；响应式图表应由js或图表库处理缩放，grid仅负责结构布局。
grid-column / grid-row 坐标定位必须用整数线号
想把某个图表组件（比如一个 <canvas></canvas> 或 <svg></svg>）钉死在网格的特定交叉点，不能靠“估算”或“视觉对齐”，必须明确使用网格线编号。CSS Grid 的坐标系从 1 开始计数，grid-column: 2 / 4 表示从第 2 条竖线开始、到第 4 条竖线结束（即跨越第 2 和第 3 列），不是“第 2 列到第 4 列”。
常见错误现象：grid-column: 1 / -1 看似想占满全宽，但在某些隐式轨道未定义的容器中会失效；更稳妥的是显式写 grid-column: 1 / -1 配合 grid-template-columns 已定义的列数，或直接用命名区域。
- 线号是绝对位置依据，不随内容变化——适合固定坐标系的图表布局
- 负值线号（如
-1）指向末尾线，但需确保容器有足够列数支撑，否则行为不可控 - 避免混用线号和命名（如
grid-column: sidebar-start / main-end），除非已明确定义了这些命名线
grid-template-areas 不适合动态点位，但适合图表容器分区
grid-template-areas 本质是静态字符串映射，它把布局“画格子”可视化，但每个区域名只能对应一个网格项。如果你要渲染上百个散点（scatter plot），别试图给每个点分配一个区域名——那会炸掉 CSS 解析器，也完全违背设计初衷。
真正该用它的场景，是划分图表的**功能区**：标题栏、坐标轴容器、图例区、主绘图区、工具栏。例如：
.chart-container {
display: grid;
grid-template-areas:
"title title title"
"axis-x axis-x axis-x"
"legend main main"
"tools main main";
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 32px 40px auto 48px;
}
-
main区域可容纳一个全尺寸<svg></svg>，后续所有点位通过 SVG 内部坐标（cx/cy）或 Canvasctx.fillRect()绘制，与 Grid 无关 - 拼错区域名（如写成
maim）会导致grid-area: main失效，元素退回到默认流式布局 - 每行字符串列数必须一致，缺位必须用
.占位，否则整条声明被浏览器忽略
响应式图表布局慎用 auto-fit + minmax() 直接套图表容器
像 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 这类写法对卡片列表很友好，但对图表容器往往造成灾难：宽度突变时，SVG viewBox 缩放错乱、Canvas 像素重绘失真、坐标轴刻度文字挤成一团。
更可控的做法是把响应逻辑交给图表库（如 D3、Chart.js）或 JS 计算，Grid 只负责外层容器结构：
- 用固定列数 +
fr单位分配空间（如1fr 2fr 1fr），让图表区始终占主导比例 - 对
<canvas></canvas>同时设置width/height属性（非 CSS）以维持设备像素比 - 监听
resize事件后手动调用图表实例的resize()方法，而不是依赖 Grid 自动重排
子网格（subgrid）目前仅适用于坐标轴对齐场景
如果你需要多个子图表（比如并排的折线图 + 柱状图）共享同一套 X 轴刻度线，grid-template-columns: subgrid 是唯一能保证像素级对齐的原生方案。但它有硬性前提：父容器必须明确定义列轨道，且子容器必须是父容器的直系子元素。
当前（2026 年中）兼容性仍是主要瓶颈：subgrid 在 Firefox 全支持，Chrome/Edge 仅支持 grid-template-columns: subgrid（不支持 rows），Safari 尚未实现。生产环境使用前必须检测：
@supports (grid-template-columns: subgrid) {
.parent { display: grid; grid-template-columns: 1fr 2fr 1fr; }
.child { display: grid; grid-template-columns: subgrid; }
}
- 不要指望
subgrid解决所有嵌套对齐问题——它只继承轨道，不继承 gap、对齐方式等 - 若 fallback 必须存在，得为不支持 subgrid 的浏览器准备一套基于
transform: translateX()或 flex 的对齐 hack - 子网格项仍需用
grid-column显式定位，不会自动填满父列
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
