grid-template-areas 用字符串定义区域名实现拼图块精准定位，需全小写、字母开头、空格对齐、”.”占位；拖拽用 grid-row/column 控制线号（从1起），配合 transition 实现归位动画。
grid-template-areas 怎么映射拼图块位置
拼图游戏的核心是让每一块能精准落到目标格子，grid-template-areas 是最直观的坐标绑定方式——它用字符串定义区域名，再用 grid-area 把元素“钉”进去。
常见错误是手动拼接字符串时换行不一致或空格数错，导致浏览器解析失败，控制台报 Invalid value for grid-template-areas；更隐蔽的是区域名含数字开头（如 "1a"），css 不认，必须改成 "a1" 这类合法标识符。
- 每个区域名必须全小写、字母开头、不含特殊字符
- 字符串每行代表一行网格，列数必须严格对齐（用空格分隔，不能用制表符）
- 未使用的格子用
"."占位，不能留空字符串或空格串 - 动态生成时，建议用数组
.map()+.join(" ")构建每行，避免手拼出错
例如 3×3 拼图的目标布局可写成：
grid-template-areas: "a1 a2 a3" "a4 a5 a6" "a7 a8 empty";用 grid-row / grid-column 做运行时拖拽定位
拖拽过程中不能靠 grid-template-areas 实时重排（开销大且无法动画），得切到行列线控制：grid-row 和 grid-column 直接指定起止线号，响应快、易过渡。
容易踩的坑是线号从 1 开始计数，但很多人按数组习惯从 0 算，导致块偏移一格；另外，若网格容器设置了 gap，线号仍按“轨道线”算，和 gap 无关——比如 3 列网格永远只有 4 条竖线（1–4），grid-column: 2 / 3 就是中间那列，不会被 gap 推开。
立即学习“前端免费学习笔记（深入）”；
- 拖拽释放时，把鼠标位置换算成行列索引，再转成线号（索引+1）
- 为实现平滑归位，给拼图块加
transition: grid-row 0.2s, grid-column 0.2s - 注意：IE 完全不支持
grid-row动画，如需兼容，得降级用transform模拟
track sizing 函数影响拼图块尺寸一致性
拼图块视觉大小必须完全一致，否则拼合时有缝隙或重叠。用 grid-template-columns: repeat(3, 1fr) 看似合理，但一旦内容高度不均（比如某块里有文字），1fr 会按内容撑高整行，破坏对齐。
根本解法是强制轨道固定尺寸：grid-template-columns: repeat(3, 100px) 或用 minmax(100px, 100px) 锁死。若需响应式，改用 clamp() 而非 fr，例如 grid-template-columns: repeat(3, clamp(80px, 25vw, 120px))。
-
fr单位只适合内容不可控的布局，拼图必须可控 - 用
aspect-ratio: 1配合width控制单块比例，比依赖 grid 自动计算更稳 - 检查 DevTools 的 Layout 面板，确认所有 track 的 computed size 完全相等
position: absolute 会绕过网格坐标系统
有人想用 position: absolute + top/left 模拟拖拽，结果发现拼图块脱离网格流，grid-area 失效，后续归位逻辑全乱。
绝对定位元素不参与 Grid 布局计算，它的坐标系是父容器（非网格轨道），和 grid-row 完全不互通。哪怕父容器是 display: grid，只要子元素设了 position: absolute，就等于主动退出网格体系。
- 拖拽过程可用
position: absolute做视觉跟随，但释放瞬间必须切回grid-row/grid-column - 千万别给拼图块设
position: relative后再用top微调——这会破坏网格对齐精度 - 如果真要混合定位，用
transform: translate()替代top/left，它不影响布局流
坐标系统这事，选一套就到底，混用只会让像素对不齐。