grid-template-areas适合语义化表格结构，通过区域名映射布局，易维护且不改变DOM顺序，但不支持响应式重排、无原生rowspan、无border-collapse、可访问性差，真需语义正确应优先用原生table。
grid-template-areas 适合语义化表格结构
用 grid-template-areas 模拟表头、行、单元格的视觉关系，比硬写 grid-row/grid-column 更易维护。它不改变 DOM 顺序，但能按区域名映射布局，适合静态报表或仪表盘中的“类表格”展示。
- 每个区域名必须用引号包裹，且每行字符串长度需对齐（空格占位）
- 重复区域名（如
"cell cell"）会自动合并为一个连续轨道，等效于表格的colspan - 不支持响应式断点内动态重排区域名——换屏时需重新定义整套
grid-template-areas
.table-grid {
display: grid;
grid-template-areas:
"header header header"
"row1 row1 row1 "
"row2 row2 row2 ";
grid-template-columns: 1fr 2fr 1fr;
}
grid-auto-flow: dense + grid-template-columns 容易漏掉跨行逻辑
单纯靠 grid-auto-flow: dense 填充网格，无法模拟表格的 rowspan 行为。CSS Grid 没有原生“跨行”声明机制，grid-row: span 2 是唯一方式，但它依赖显式定位，不能由内容自动触发。
- 若想让某单元格向下跨两行，必须给它设
grid-row: span 2，且下方格子不能已占据该位置 -
grid-auto-flow: dense只影响未指定位置的项，对已设grid-row的项无作用 - 和真实
<table>不同：Grid 中跨行元素不会“推开”后续行，而是覆盖或挤出其他项，需手动调grid-row-start避免重叠
border-collapse 等效方案只能靠 gap + background
CSS Grid 没有 border-collapse，但可用 gap 控制间距，再用父容器 background 模拟“合并边框”的深色线效果。
- 设
gap: 1px后，给容器加background: #ccc，子项设background: white，视觉上就是细实线分隔 - 若需外边框，得额外包一层带
border的 wrapper，Grid 容器自身不支持border-collapse的渲染逻辑 - 注意：当子项有
outline或box-shadow时，会破坏 gap 背景模拟效果，优先用border替代
可访问性与语义缺失是最大硬伤
用 Grid 模拟表格布局，DOM 结构仍是扁平的 <div> 堆叠，屏幕阅读器无法识别“行”“列”“表头”关系，role="table" 等 ARIA 属性只是补救，不能替代原生 <table> 的语义隐含逻辑。
立即学习“前端免费学习笔记（深入）”；
- 必须手动加
role="row"、role="cell"、role="columnheader"，且需用aria-labelledby关联标题 - 键盘导航（如 Tab 进入后方向键移动）仍按 DOM 顺序，不是表格逻辑顺序，用户可能跳过“视觉上同一行”的多个单元格
- 导出为 Excel 或打印样式时，Grid 布局常塌陷为单列，而
<table>有稳定表格语义输出
真要兼顾布局自由与语义正确，优先用 <table> + display: table-cell 等微调；仅当必须脱离表格语义（比如错位卡片区）才选 Grid 模拟——这时候就得接受可访问性要额外花三倍精力补。
