用grid-template-areas+数据驱动class切换更稳；拖拽只改数组顺序，js生成新grid-template-areas字符串赋值，浏览器自动重排占位，避免order失效、firefox错位及手动计算开销。
直接用 grid-template-areas + 数据驱动 class 切换，别碰 order 或内联 grid-row/grid-column —— 否则拖拽占位会失效、Firefox 下错位、重排逻辑极易崩。
为什么 order 不适合看板拖拽占位
它只改变视觉顺序，不触发 Grid 自动重排占位；当容器没显式定义行列轨道时，grid-auto-flow 会绕过 order，导致拖动 A 时 B 不让位，留下空白格。
- Firefox 下多个相同
order值的项会随机排列，无法预测位置 - 每次拖拽结束都得遍历所有项重设
style.order，DOM 重排开销大 - 仅适用于静态排序展示，不是交互式占位的解法
用 grid-template-areas 动态生成布局字符串
把面板顺序完全交给数据数组，JS 只负责拼出新的 grid-template-areas 字符串并赋给容器 style.gridTemplateAreas，浏览器自动重排所有项，天然支持视觉占位。
- 区域名必须语义化（如
"header"、"sidebar"），不能用"col2-row3"这类坐标名，否则拖拽后名实脱钩 - 空格和
.都算有效占位符："header . sidebar"比"header sidebar"更安全，避免空格合并导致解析失败 - CSS 中不能写死
grid-template-areas，也不能用 CSS Custom Properties（var(--areas)无效） - 示例：
const areas = ['header', 'main', 'sidebar'].map(name => `"${name}"`).join(' ');<br>container.style.gridTemplateAreas = areas;
Firefox 下内联行列定位的兼容性坑
想用 grid-row-start 精准控制每个面板？Firefox 要求必须同时设置 grid-row-end，否则直接忽略内联值，面板“消失”或错位。
- 正确写法是
item.style.gridRow = '2 / 3'，或分开写gridRowStart和gridRowEnd - 避免
grid-row: span 1—— 重排后可能被解析为auto / auto，失去定位能力 - 若必须用行列线，优先用负数线（如
-1表示最后一行线），兼容性更稳
真正难的不是写对第一版拖拽，而是拖到边界、跨列、快速连续操作时，order 或手动计算 grid-row 的逻辑会漏掉各种 case；而 grid-template-areas 把复杂度交给浏览器 Layout 引擎，只要数组顺序对，布局就对 —— 这个权衡点，容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
