html5 grid布局不支持真正合并单元格，其“跨行跨列”是通过grid-row和grid-column控制网格项占据多个轨道实现的，本质为占位而非删格；需用命名线提升语义性，表格式数据仍推荐语义化table配合rowspan/colspan。
HTML5 中的 Grid 布局本身不支持“合并单元格”，它没有类似 `
grid-row 和 grid-column 的起止线控制。
用 grid-row 跨越多行
指定起始和结束的行线编号，或用 span 表示跨度：
-
grid-row: 2 / 4;→ 占据第 2 行和第 3 行（从第 2 条线开始，到第 4 条线结束） -
grid-row: 3 / span 2;→ 从第 3 条线开始，向下占 2 个行轨道（即第 3、4 行） - 避免写
grid-row: span 2;（无起点），结果不可控，尤其在动态内容中容易错位 - 推荐配合命名线：
grid-template-rows: [header] 60px [main] 1fr [footer];，再写grid-row: main / footer;，语义清晰、维护性强
用 grid-column 跨越多列
逻辑与跨行完全一致，只是作用于列方向：
-
grid-column: 1 / 4;→ 从第 1 条列线开始，到第 4 条列线结束，横跨前 3 列 -
grid-column: 2 / span 3;→ 从第 2 条列线起，向右占 3 个列轨道 - 若使用命名列线：
grid-template-columns: [start] 1fr [content] 2fr [end];，可写grid-column: start / end;
真正需要“合并单元格”语义时怎么办
Grid 无法改变网格结构本身，但以下场景有对应解法：
-
表格式数据（如排班、课表）：优先考虑语义化
<table>，用 <code>rowspan和colspan；Grid 更适合布局容器，而非数据表格 -
卡片式大标题覆盖多行：用
grid-row+grid-column控制范围，再配合place-self: center;居中，视觉等效于合并 -
响应式中动态跨区：结合
@media重设grid-row/grid-column，比手动合并更灵活可靠
Grid 的跨行跨列不是“删格子”，而是“占格子”。理解行线/列线编号、善用命名线、区分语义场景，才能用得稳、改得清、看得懂。
