grid-area 设置跨行跨列区域本质是语法糖，等价于 grid-row-start 等四个属性；命名区域通过 grid-template-areas 重复名称实现跨列，线号定位用 grid-row/column 指定起止或 span 跨度，轨道尺寸决定实际空间，隐式网格与层叠溢出需特别注意。
grid-area 怎么设置跨行跨列的命名区域
直接用 grid-area 声明一个带名字的区域，本质是语法糖，它会自动展开为 grid-row-start、grid-column-start、grid-row-end、grid-column-end 四个属性。所以“合并”不是靠拉伸某个元素，而是靠让多个网格单元格共同归属到同一个命名区域里。
例如定义 header 占满第一行所有列：
.container {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
这里每组引号内是一个行，空格分隔列，重复写 header 就表示它横跨三列；同理 footer 也是跨三列。而 nav、main、aside 各占一列，不跨。
grid-row / grid-column 手动控制跨行跨列的写法
当命名区域不够灵活（比如要动态合并、或需计算起止线号），就得用线号定位。CSS Grid 的行/列线从 1 开始编号，grid-row: 2 / 4 表示从第 2 条行线开始、到第 4 条行线结束——也就是跨越第 2、第 3 两行（含）。
立即学习“前端免费学习笔记（深入）”；
-
grid-row: 1 / -1表示从首行线到末行线，即占满所有行 -
grid-column: 2 / span 3表示从第 2 列线开始，向右跨 3 列（等价于2 / 5） -
grid-row: span 2表示自动起始，只指定跨度；但必须确保容器有足够空间，否则可能被截断
注意：负索引（如 -1）在部分旧版 Safari 中支持不稳定，生产环境慎用。
grid-template-rows / grid-template-columns 如何影响跨距计算
跨多少“行高”或“列宽”，取决于你定义的轨道尺寸。如果 grid-template-rows: 100px 1fr，那么 grid-row: 1 / 3 就覆盖 100px + 1fr 高度；但如果中间插了 grid-row-gap: 20px，这个 gap 不计入跨距，只是额外间距。
常见误区：
- 以为
span 2就是“两个像素高”——错，它是跨两条线，和轨道尺寸无关 - 用
grid-row: 1 / 2想“合并”其实没合并，只是占一行，和默认一样 - 忘记隐式网格：超出
grid-template-rows定义的行数时，浏览器会自动生成隐式行，但它们默认高度为auto，可能导致内容撑开高度不可控
合并区域时容易忽略的层叠与内容溢出问题
区域合并本身不改变 z-index 或渲染顺序，但多个元素被分配到同一区域（比如两个 div 都设了 grid-area: main），它们会按 HTML 顺序层叠，后出现的盖在前面的上面。
更隐蔽的问题是内容溢出：
- 若合并区域太小（比如
grid-row: 1 / 2且该行高仅20px），文本或子元素可能被裁剪，overflow默认是visible，但视觉上像“消失” - Flex 或 Grid 子项在合并区域内若也设了
height: 100%，可能因父容器未设明确高度而失效——合并区域本身不提供高度约束，得靠轨道定义或显式 height/min-height
真正决定“合并是否生效”的，从来不是某个属性写得多漂亮，而是轨道定义是否预留了空间、线号是否对得上、以及有没有其他布局规则（比如 align-content）悄悄重排了行位置。
