CSS Grid提供两种合并行列方式：一是用grid-template-areas通过字符串网格定义逻辑区域；二是用grid-column/grid-row按网格线编号精确控制跨距。
grid-template-areas 一次定义行列布局
用 grid-template-areas 可以把多个列和多行的区域一次性合并成逻辑区块，本质是用字符串网格“画”出结构。它不关心具体列宽或行高，只管命名区域如何拼接。
- 每个字符串代表一行，空格分隔不同列，相同名字的单元格自动连成一块区域（跨行跨列都行）
- 区域名必须用引号包裹，且只能是合法标识符（不能含短横线、数字开头等）
- 未使用的单元格用
.占位，否则会报错或布局错乱 - 所有行的列数必须一致，否则浏览器会静默截断或忽略整条规则
grid-template-areas: "header header header" "nav main sidebar" "footer footer footer";
这三行就定义了 3 行 × 3 列，并把 header、footer 各自横跨三列，main 单独占中间一列，nav 和 sidebar 分居左右——合并列与行的动作全在字符串里完成。
grid-column / grid-row 指定起止线合并单元格
当需要精确控制某一个元素跨越几列或几行时，grid-column 和 grid-row 是最直接的方式。它们操作的是网格线编号，不是区域名。
- 值可以是
1 / 4（从第 1 线到第 4 线，即跨 3 格），也可以是span 2（跨 2 格） - 起始线和结束线都支持负数，比如
-2 / -1表示倒数第二条线到倒数第一条线 - 如果只写一个值如
grid-column: 2，等价于2 / 3，不会合并 - 使用
span时要注意容器总列/行数是否足够，否则可能溢出或被截断
比如让标题横跨前两列：header { grid-column: 1 / span 2; }
如果容器只有两列，这就占满；如果是四列，它只占左半边。
避免 grid-area 与命名冲突导致合并失效
grid-area 是 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写，但它优先级高于 grid-template-areas 中的命名。一旦你给元素设了 grid-area: header，又没在 grid-template-areas 里定义 header，那这个元素就会被丢到网格外（变成 auto-placement 的孤立项）。
立即学习“前端免费学习笔记（深入）”；
- 如果用了
grid-template-areas，就别对子元素设同名的grid-area，除非你真想覆盖默认位置 -
grid-area的值如果是个标识符（无引号），浏览器会先查grid-template-areas是否有该区域；查不到就当它是四值简写，但此时语法错误会导致整条规则失效 - 常见报错：
Invalid property value，往往是因为grid-area: "header"多写了引号（应该不带引号）或者名字拼错了
flexbox 无法真正合并行列，别硬套
有人想用 display: flex 配合 flex-wrap 或 align-content 来“合并”多行，这是误解。Flex 是一维布局模型，它的“行”只是换行结果，没有坐标系概念，也不能让一个子项跨多行。
-
flex下的align-self或margin: auto只能调整单行内位置，无法跨行拉伸 - 尝试用
rowspan/colspan思维套 flex，最后都会卡在高度不一致、基线错位、响应断点错乱上 - 真要合并行列，CSS Grid 是唯一原生支持的方案；table 是备选，但语义和维护成本高得多
合并行列这事，核心就两点：要么用字符串“画格子”，要么用线号“拉边框”。选错模型，后面所有调整都是在补洞。
