纯css无法直接响应拖拽调整grid轨道尺寸，因grid容器不满足resize生效条件；需用javascript控制或借助带resize的子元素间接实现，并注意浏览器兼容性与布局语义完整性。
纯 CSS 无法直接让 grid-template-columns 或 grid-template-rows 响应拖拽行为；必须用 JavaScript 控制列宽/行高，或借助 resize 元素间接影响 Grid 轨道尺寸。
为什么不能直接对 grid 容器设 resize
浏览器会忽略 resize: horizontal 等声明，因为 display: grid 容器不满足 resize 的生效前提：它既不是块级可交互内容元素，也不具备非 visible 的 overflow。常见现象是光标不变、手柄不出现、拖不动——根本原因就是容器本身被跳过解析。
真正起作用的只能是嵌套在 Grid 内部、有明确尺寸和 overflow: auto（或 hidden）的子元素，且该元素需脱离文档流并覆盖列边界位置。
用 resize + 绝对定位模拟列边框拖拽
核心是插入一个透明的 .resize-bar 元素，放在两列之间，靠视觉遮罩和 pointer-events 控制交互边界：
-
.resize-bar必须设position: absolute、top: 0、bottom: 0、width: 8px，并用right: 0对齐左侧列右边缘 - 必须设
resize: horizontal和overflow: auto（仅auto或scroll有效，hidden不触发手柄） - 加
opacity: 0和pointer-events: none，避免遮挡右侧内容；但要确保其父容器未设overflow: hidden，否则 resize 区域会被裁剪 - WebKit 浏览器下可通过
::-webkit-scrollbar { width: 8px }加宽拖拽热区；Firefox 需回退为border-left: 1px dashed #999提供视觉提示
拖拽后如何真正更新 Grid 列宽
resize 改变的是那个 bar 子元素自身的 width，不是 Grid 轨道。要让它影响布局，得让该子元素作为占位项参与 Grid 排列，并绑定其尺寸到列定义逻辑：
- 把
.resize-bar设为grid-column: span 1，并给它设min-width/max-width限制范围（如min-width: 20px; max-width: 400px） - Grid 容器改用动态列定义，例如
grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr)，其中中间的auto轨道对应 resize-bar 所在列 - 监听
resize事件时，读取resize-bar.offsetWidth，再通过 JS 更新该轨道的grid-template-columns字符串（注意：需重设整个属性值，不能局部修改） - iOS Safari 和 IE 完全不支持
resize，必须提供 JS 拖拽回退方案，比如监听mousedown+mousemove，手动计算并更新列宽
Vue 3 中更推荐用 grid-layout-plus 这类库
如果项目已用 Vue 3，硬啃 resize + Grid 轨道联动容易踩坑，尤其涉及响应式重排、移动端 touch 冲突、order 与 grid-row 解析差异等问题。直接引入 grid-layout-plus 可省去大量边界处理：
- 它内部封装了拖拽坐标映射、占位符插入（用
height: 0; overflow: hidden替代visibility: hidden）、移动端touchstart.preventDefault()条件拦截等细节 - 布局数据用数组描述（
{ i: 'a', x: 0, y: 0, w: 6, h: 2 }），不依赖 CSS 轨道宽度，天然规避 resize 兼容性问题 - 列数由
:col-num="12"控制，行高由:row-height="30"控制，所有尺寸逻辑交由 JS 管理，CSS 只负责渲染
真正难的不是“怎么拖”，而是拖拽过程中保持网格语义完整、跨浏览器行为一致、以及 resize 后列宽不坍缩或溢出——这些细节在纯 CSS 方案里几乎必然要自己补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
