<p>Grid 是 CSS 唯一原生二维布局系统，专为结构化页面设计；仅 display: grid 容器的直接子元素是网格项目；网格线编号从1开始，“+1”规则必记；命名定位（如 grid-area）比编号更安全；track、cell、area 层级分明不可混用；显式网格由 template 定义，隐式网格由 auto-* 生成，需谨慎控制。</p>
grid-container 和 grid-item：谁算“项目”有严格边界
只有 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 编号 vs 命名：定位项目的两种路径
网格线（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 指向的是最后一根**显式定义的**行线，不是实际末尾
track、cell、area：别再把“单元格”当万能单位
grid-track（轨道）是两条相邻网格线之间的空间，分“行轨道”和“列轨道”；grid-cell（单元格）是单个轨道交叉形成的最小矩形；grid-area（区域）则是由多个单元格合并成的矩形块——三者层级清晰，不可混用。
- 常见误解：“我把 item 设成
grid-column: 1 / -1就是占满整行”，其实它只占满当前行轨道范围，若该行高度由auto决定，内容撑高后，其他项目不会自动对齐底部 - 真正要“拉伸填满”得靠
align-self: stretch或容器级align-items: stretch -
grid-template-areas只接受矩形区域，不能定义 L 形或空洞——想做非矩形布局？得换思路（比如用clip-path或 SVG）
显式网格 vs 隐式网格：超出定义范围时浏览器怎么补救
你写的 grid-template-columns 和 grid-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 是逻辑命名，而隐式轨道是浏览器的善意猜测」——这三者一旦错配，布局就从可控变成玄学。 
