Grid 是 CSS 唯一原生二维布局系统，专为结构化页面设计；仅 display: grid 容器的直接子元素是网格项目；网格线编号从1开始，“+1”规则必记；命名定位（如 grid-area）比编号更安全；track、cell、area 层级分明不可混用；显式网格由 template 定义，隐式网格由 auto-* 生成，需谨慎控制。Grid 是 CSS 中唯一的原生二维布局系统，它能同时控制行和列，不是“加强版 Flex”，也不是“表格替代品”——它是为结构化页面而生的底层布局引擎。
只有 display: grid 元素的**直接子元素**才是网格项目（grid-item），孙子、曾孙元素完全不受其影响。这点常被误读，导致写了一堆 grid-column 却没生效。
.container { display: grid; } .container > .sidebar > .nav —— .nav 不是项目，grid-area 对它无效.sidebar 自身也设 display: grid，变成独立容器float）、行内块（display: inline-block）、垂直对齐（vertical-align）在项目上自动失效，别白费劲网格线（grid-line）是定位的锚点：列线从左到右编号（1, 2, 3…），行线从上到下编号（1, 2, 3…）。3 列产生 4 条列线，2 行产生 3 条行线——这个“+1”规则必须刻进本能。
grid-column: 2 / 4 表示从第 2 条列线开始、到第 4 条列线结束（即跨两列）grid-template-areas: "header header" "main sidebar" 配合 grid-area: main，避免因增删轨道导致编号错位grid-row: 1 / -1 看似想占满所有行，但若用的是隐式网格（grid-auto-rows），-1 指向的是最后一根**显式定义的**行线，不是实际末尾grid-track（轨道）是两条相邻网格线之间的空间，分“行轨道”和“列轨道”；grid-cell（单元格）是单个轨道交叉形成的最小矩形；grid-area（区域）则是由多个单元格合并成的矩形块——三者层级清晰，不可混用。
grid-column: 1 / -1 就是占满整行”，其实它只占满当前行轨道范围，若该行高度由 auto 决定，内容撑高后，其他项目不会自动对齐底部align-self: stretch 或容器级 align-items: stretch
grid-template-areas 只接受矩形区域，不能定义 L 形或空洞——想做非矩形布局？得换思路（比如用 clip-path 或 SVG）你写的 gr 和 
id-template-columnsgrid-template-rows 构成**显式网格**；当项目数量超过定义的行列数，浏览器会自动生成额外轨道——这就是**隐式网格**，由 grid-auto-rows 和 grid-auto-columns 控制尺寸。
grid-auto-rows？默认值是 auto，结果可能高度不一致、难以预测grid-auto-flow: dense 可能触发“回填”：把小项目塞进前面留下的空白，但会打乱 DOM 顺序，可访问性和 SEO 风险陡增repeat(auto-fit, minmax(300px, 1fr)))：它依赖隐式网格生成列，但若容器宽度突变（如旋转屏幕），渲染可能闪烁或错位grid-area 是逻辑命名，而隐式轨道是浏览器的善意猜测」——这三者一旦错配，布局就从可控变成玄学。