CSS Grid 的“合并”本质是元素跨越多条网格线，需显式定义 grid-template-rows/columns 才能确保线号存在；推荐用 grid-area 四值语法、负线号或命名线，避免硬编码大数字或混用 span。
不能靠“合并单元格”思维去写 CSS Grid，它没有 rowspan 或 colspan 这种语义操作；所谓“合并”，本质是让一个元素**跨越多条网格线**，并确保其他元素不侵占它占据的空间。
grid-column 和 grid-row 的线号写法必须配 grid-template-rows/columns
只写 grid-row: 1 / 4 却没定义 grid-template-rows，跨行大概率静默失效。浏览器不会凭空生成第 4 条行线——它只按内容生成隐式轨道，而隐式轨道的线号不可控。
- 显式声明是底线：
grid-template-rows: 60px 1fr 1fr才能确保有 1–4 这四条行线 -
grid-column: 1 / 3表示“从第 1 条列线到第 3 条列线”，实际占两列，不是“合并两个单元格” - 用开发者工具打开 Grid overlay，确认目标线号是否真实画出，比猜更可靠
- 避免硬写大数字（如
grid-row: 1 / 99），改用grid-row: 1 / -1指向末尾线，更健壮
grid-area 四值写法比分开设更少出错
同时控制行列起止时，分开写 grid-row 和 grid-column 容易漏掉某一项，导致元素跑到意外位置。四值 grid-area 把逻辑锁死在一个声明里。
-
grid-area: 2 / 1 / 4 / 3等价于grid-row: 2 / 4+grid-column: 1 / 3 - 四个值顺序固定：row-start / column-start / row-end / column-end
- 只给两个值（如
grid-area: 1 / 2）会自动补auto，但行为不如显式写全可控 - 命名区域（如
grid-area: header）依赖父级grid-template-areas定义，拼错就静默回退到默认流
响应式下跨行跨列错乱，根本原因是线号动态重排
桌面端 grid-template-columns: repeat(4, 1fr) 有 5 条竖线（1–5），移动端改成 repeat(2, 1fr) 后只剩 3 条（1–3）。原来写的 grid-column: 2 / 5 在移动端直接越界，被浏览器丢弃。
立即学习“前端免费学习笔记（深入）”；
- 媒体查询中必须同步调整
grid-template-columns和子项的grid-column - 优先用负值线（如
grid-column: 2 / -1）或命名线（[start] 1fr [end]+grid-column: start / end）替代绝对数字 - 混用
span和线号（如grid-row: 2 / span 2）在隐式网格中易出错，统一用线号更稳 - 用
grid-auto-flow: dense可让后续项“插空”，但会打乱 DOM 渲染顺序，语义化区域慎用
真正难的不是语法，而是理解线号是真实存在的物理分隔线——它不随内容伸缩，也不自动对齐，你得亲手画出来、数清楚、再引用。漏掉一条 grid-template-rows，整个跨行逻辑就塌了。
