HTML <table> 无法用 CSS Grid 实现非线性排列，因其语义与 Grid 能力错配；应改用语义中立容器（如 <div>）配合 display: grid 实现灵活布局。
HTML <table> 本身无法用 CSS Grid 实现非线性排列——这不是限制，而是语义与能力的错配。真正可行的路径是：弃用 <table>，改用语义中立容器（如 <div>）+ display: grid。
为什么不能直接对 <table> 元素设 display: grid
浏览器会强制重置 <table> 的内部盒模型，导致以下不可逆问题：
-
<tr>、<td>等元素失去表格语义，屏幕阅读器无法识别行列关系 - 即使加了
display: grid，grid-template-columns对<table>容器无效——它只响应table-layout和width属性 - 跨行/跨列逻辑（
rowspan/colspan）与grid-row/grid-column冲突，渲染结果不可预测 - 所有浏览器（包括 Chrome 126+）都会静默忽略对
<table>直接应用的grid-template-areas
替代方案：用 <div> 模拟表格结构并启用 Grid
适用于需要「视觉上像表格、行为上可跨格、结构上可响应」的场景（如仪表盘报表、多维筛选面板）：
- 把每行数据封装为一个
<div class="row">，每个单元格用<div class="cell">，而非<tr>/<td> - 给父容器设
display: grid，用grid-template-columns定义列轨道（例如1fr 2fr 1fr minmax(120px, 1fr)） - 需要跨列？给对应
.cell加grid-column: 2 / span 3；跨行？加grid-row: 1 / span 2 - 若需保持表头冻结，不要用
position: sticky在 grid item 上——应将表头单独抽为一个.header区域，用grid-area固定位置
动态列表中插入固定位置模块（如广告位）
常见于 CMS 渲染的商品列表末尾插入一个需显示在“第 2 行第 3 列”的 .promo 块：
立即学习“前端免费学习笔记（深入）”；
- 确保所有子项（含
.promo）都是同一 grid 容器的**直系子元素**，不能嵌套在<ul>或<ol>里 - 用
grid-auto-flow: row（默认）保证自动填充顺序，再对.promo单独定位：grid-row: 2; grid-column: 3 / span 2 - 注意：若列表项数量不固定，
grid-row的绝对值（如2）可能失效——此时改用grid-row: 2 / 3+grid-column: 3 / 5更稳妥 - 避免依赖
nth-child()计算位置，CSS Grid 的显式定位不依赖 DOM 顺序
容易被忽略的兼容性与可访问性细节
看似简单的 Grid 布局，在真实项目中常因这几个点翻车：
-
gap在 IE11 中完全不支持，必须用grid-row-gap+grid-column-gap替代（且仅部分版本生效） - 用
grid-template-areas时，所有区域名必须用引号包裹，且每行长度一致，否则整条规则失效（例如"a b c" "d . e"合法，"a b c" "d e"非法） - 如果内容是真实表格数据（带行列标题、可排序、需导出 Excel），别强行用 Grid 替代——语义和工具链支持（如 DataTables 插件）会大幅退化
-
display: contents虽能抹平包装<div>的盒模型，但会剥离该节点的可访问性角色，屏幕阅读器跳过它——仅当确认无障碍无影响时才用
