grid-column 和 grid-row 必须配合显式网格线才生效；若未定义 grid-template-columns，写 grid-column: 1 / 3 会静默失效，因隐式线不可控；验证需用 DevTools Grid overlay 查看目标线是否存在。
grid-column 和 grid-row 必须配合显式网格线才生效
写了 grid-column: 1 / 3 却没跨列？大概率是父容器根本没定义 grid-template-columns。Grid 不会因为你写了线号就自动造出对应轨道——没有显式声明，只有隐式线，而隐式线数量不可控、不固定，导致规则静默失效。
验证方法：打开 DevTools → Elements → 选中容器 → 勾选 Grid overlay，看目标线（比如第 4 条竖线）是否存在。不存在就别指望它起作用。
- 安全做法：哪怕只是占位，也要写上基础轨道，例如
grid-template-columns: 1fr 1fr 1fr（生成 4 条竖线） - 全宽常用写法：
grid-column: 1 / -1，但前提是显式列数 ≥ 2，否则-1指向的线也不存在 - 负值倒数只在显式轨道下可靠：
grid-column: -3 / -1在 3 列布局中等价于1 / 3，但若列数响应式变化，线号必须同步更新或改用命名线
span 写法依赖自动起点，不是“固定占几格”
grid-column: span 2 不等于“横跨两列”，而是“从当前自动分配的位置往右占两格”。这个“当前位置”受 grid-auto-flow、已有元素顺序、order 甚至空隙影响，极易偏移。
- 想从第 2 列开始再跨 2 列，必须写全：
grid-column: 2 / span 2，不能只写span 2 -
grid-row: span 3可能落到隐式行里，如果没设grid-auto-rows，高度会失控；建议加grid-auto-rows: minmax(60px, auto) -
grid-column: span 2 / 4是非法语法，整条规则会被浏览器丢弃（DevTools 中显示删除线）
用 grid-area 一行写死四条线更省心也更可靠
当布局模块稳定（比如仪表盘 header/sidebar/main），grid-area 比分开写 grid-column + grid-row 更紧凑、不易漏项，也避免属性覆盖干扰。
立即学习“前端免费学习笔记（深入）”；
-
grid-area: 2 / 1 / 4 / 3等价于grid-row: 2 / 4+grid-column: 1 / 3 - 支持
span：grid-area: 1 / 2 / span 2 / span 3表示从第 1 行第 2 列开始，跨 2 行 3 列 - 只写两个值如
grid-area: 1 / 2会让缺失的row-end和column-end按 auto 补全，不如显式写全可控 - 注意：
grid-area是简写，会覆盖grid-row-start等独立属性，调试时 DevTools 里灰掉的属性可能就是被它悄悄覆盖了
响应式下线号错乱，本质是轨道重排
线号不是静态编号，它随 grid-template-columns 动态重排。桌面端 repeat(4, 1fr) 有 5 条竖线（1–5），移动端改成 repeat(2, 1fr) 后只剩 3 条（1–3）。硬写 grid-column: 1 / 5 在小屏下直接失效。
- 方案一：响应式重写线号，比如
@media (max-width: 768px) { .item { grid-column: 1 / 3; } } - 方案二：改用命名线，
grid-template-columns: [start] 1fr [mid] 1fr [end]，然后写grid-column: start / end，语义稳定且免算数 - 方案三：用负值兜底，
grid-column: 1 / -1在多数列数变化场景下仍可用，但需确保最小列数 ≥ 2
真正卡住人的往往不是语法写错，而是线号根本不存在，或者你写的终点线在当前断点下已被压缩没了。
