CSS Grid中“跨行跨列”本质是元素跨越多条网格线，非语义合并；需显式定义grid-template-rows/columns确保线号存在，推荐用grid-area四值语法、负线号或命名线，避免硬编码大数字或混用span。
Grid布局里没有“合并单元格”这回事
Grid 不是表格，它压根不提供 colspan 或 rowspan。所谓“合并”，只是用 grid-column 和 grid-row 让一个元素**跨多个网格轨道**，视觉上覆盖多格——但底层仍是独立网格项，不是语义合并。
用 grid-column / grid-row 跨列或跨行
这是最直接的替代方案，适用于明确行列数的静态布局。
-
grid-column: 2 / span 3表示从第 2 条竖线开始，向右跨越 3 列（即占第 2、3、4 列） -
grid-row: 1 / 4表示从第 1 条横线开始，到第 4 条横线结束（即占第 1、2、3 行） - 起始/结束值必须对齐真实网格线编号，不能写
grid-column: 1 / 3却只定义了 2 列轨道——会静默失效或错位 - 避免用
grid-column: 1 / -1想“铺满整行”，响应式下易因隐式轨道扩张导致意外留白
动态内容下 grid-column-end 值怎么算
当列数不确定（比如由 JS 动态生成），靠硬编码轨道号会崩。这时得换思路：
- 用
grid-column: 1 / -1确实能撑满显式定义的列区域，但前提是父容器设置了grid-template-columns - 若列由
auto-fit+minmax()生成，-1指向的是隐式网格末尾，行为不可控；更稳的方式是加一个占满所有列的伪元素或 wrapper - 想让某格跨全部列，又不想依赖列数，可设该元素
grid-column: 1 / -1并确保父容器grid-template-columns已明确定义（哪怕用repeat(auto-fill, minmax(100px, 1fr)))）
和 table 合并相比，Grid 的坑在哪
Grid 看似灵活，但丢掉了表格的语义与自动对齐能力，容易在三个地方翻车：
立即学习“前端免费学习笔记（深入）”；
- 可访问性：屏幕阅读器不会把跨多格的
div当作“合并单元格”读，需手动加role="cell"和aria-colspan/aria-rowspan - 打印样式：浏览器打印时，
grid-column: 1 / span 3可能被截断或错行，而colspan表格天然适配分页 - 数据对齐：Grid 无法像
<thead> 那样保证首行标题和下面数据列严格垂直对齐——列宽由内容撑开时，跨格元素边缘可能和下方单格内容错开 Grid 的“合并”本质是定位控制，不是结构合并。真要语义正确、打印友好、无障碍达标，且列行关系固定，table + <code>colspan/rowspan仍是更稳妥的选择。
