不能直接删掉position: absolute就完事，因为原始div布局缺乏行列语义，DOM结构不表达网格关系，类名如x1b、y41等无法被CSS自动映射为grid-column或grid-row，必须通过插入语义包装、聚类分析像素坐标、合理使用@supports回退等微调手段重建可推断的网格骨架。
绝对定位的 HTML 重构不是“把 position: absolute 换成 display: grid”就能完事——关键在于标记结构是否承载了可推断的网格语义。原始 div 布局若只有 x1b、y41、w10 这类像素类名，直接套用 Grid 会丢失逻辑关系，反而更难维护。
为什么不能直接删掉 position: absolute 就完事
原始布局中，每个 div 的位置由 left、bottom、width、height 硬编码决定，DOM 结构本身不表达行列关系。比如一个视觉上横跨三列的标题，代码里可能只是单个 <div class="x1b y41 w30 h8">，没有父容器、没有嵌套层级、也没有语义标签。这种结构丢给 grid-template-areas 或 grid-row / grid-column 时，CSS 无法自动识别“它该占哪几格”。
- 浏览器不解析类名含义，
w30不等于grid-column: span 3 - 没有行/列上下文，
grid-area只能靠人工硬写，和原来写left: 112px工作量差不多 - 响应式断点一加，所有像素偏移失效，而 Grid 的
fr单位天然适配，但前提是结构得支持
标记微调的核心：补足隐含的网格骨架
不需要重写整个 DOM，但必须在关键节点插入轻量级语义包装，让 Grid 有据可依。重点不是改样式，是让 HTML 能“说清自己是谁、在哪一行、属于哪一组”。
- 给视觉上同一行的元素包一层
<div class="grid-row">，哪怕它原本是平级的绝对定位 div - 为需要横向合并的单元格添加
data-colspan="3"属性（不渲染，只供 JS 或后续样式参考） - 把纯装饰性定位块（如背景色块、分隔线）抽离为伪元素或 SVG，避免污染主结构
- 保留原有类名（如
x1b），但不再依赖它做布局，只用作状态标识或 JS 钩子
grid-column 和 grid-row 的赋值依据从哪来
不能凭感觉写 grid-column: 2 / 4。真实项目中，这些值应来自对原始像素坐标的区间聚类分析，而非肉眼估算。
立即学习“前端免费学习笔记（深入）”；
- 收集所有
left值，按 8–16px 阈值聚类，每组对应一个列起点（如112px、228px→ 列 1、列 2） - 收集所有
bottom值，同样聚类，映射为行号（注意：CSS Grid 行号从上往下，而bottom是从下往上，需翻转） - 宽度
width决定grid-column-end偏移量，高度height决定grid-row-end，但要用相对单位（如minmax(120px, 1fr)）替代固定像素 - 遇到
left: auto或right: 0这类动态偏移，优先用justify-self: end或margin-left: auto替代
容易被忽略的兼容与回退处理
Grid 在现代浏览器没问题，但旧项目常要兼容 IE11 或某些 WebView。这时候“微调”不只是加新代码，还得控制破坏面。
- 不要删除原始
position: absolute规则，而是用@supports (display: grid)包裹 Grid 样式，让老浏览器降级回原布局 - 避免在 Grid 容器上同时使用
float或inline-block，它们会触发不同的格式化上下文，导致尺寸计算错乱 - 如果原始布局用了
z-index控制层叠，Grid 中仍需保留，因为 Grid 不改变层叠上下文生成规则 - 第三方库（如某些图表组件）注入的绝对定位元素，建议用
isolation: isolate隔离其定位上下文，防止干扰 Grid 布局
真正卡住重构进度的，往往不是 Grid 语法本身，而是原始 HTML 里那些没名字、没结构、只靠像素活着的 div。微调不是美化，是给机器可读的线索——哪怕只加一个 role="row" 或一个空的 <section>，都比硬算 grid-area 字符串强。
