纯 CSS 实现 Grid 列宽拖拽可行，但需用 overflow 约束的绝对定位 resize-bar 模拟边框，因 display: grid 容器不满足 resize 的块级+非 visible overflow 前提，且 iOS Safari 和 IE 不支持，须 JS 回退。
纯 CSS 实现 Grid 列宽拖拽是可行的，但不能直接在 grid-template-columns 上操作 —— 必须用 resize 作用于嵌套的、有 overflow 约束的子元素，并结合定位与视觉遮罩来模拟“列边框可拖”效果。
为什么 grid-container 本身不能设 resize
Grid 容器是布局上下文，不是可交互内容元素；resize 只对满足条件的**单个块级元素**生效：必须同时满足 overflow 不为 visible（如 auto、hidden）且 display 为 block 或 inline-block。你给 display: grid 的容器加 resize: horizontal，浏览器会直接忽略——它不参与用户尺寸调整流程。
常见错误现象：resize 声明写了，但右下角没手柄、鼠标 hover 无 ew-resize 光标、拖不动。
- 检查是否漏了
overflow: hidden（或auto/scroll） - 确认该元素不是
display: inline或被flex/grid父容器压缩到无初始宽高 - 避免父容器用了
display: flex且未设min-width，否则拖拽时宽度可能坍缩为 0
resize-bar 必须脱离文档流并覆盖目标列边界
真正起作用的不是“列”，而是你放在两列之间的、绝对定位的透明 div，它带 resize: horizontal，高度拉满，宽度设为足够大（比如 200px），再通过 transform: scaleX(100) 或 width + overflow: scroll 拉伸 resize 手柄区域（WebKit 下 resize bar 和 scrollbar 是同一体系）。
立即学习“前端免费学习笔记（深入）”；
关键点在于：这个 resize-bar 要「视觉上藏在右边一栏后面，只透出几像素作为拖拽线」，同时用 pointer-events: none 避免干扰右侧内容交互。
.resize-bar { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; resize: horizontal; overflow: auto; opacity: 0; }- 配合自定义滚动条：Chrome/Safari 下加
::-webkit-scrollbar { width: 8px; }可让拖拽区变宽 - Firefox 不支持
::-webkit-scrollbar，需用@supports (-moz-appearance: none)单独处理，例如加border-left: 1px dashed #999作为视觉反馈
Grid 列宽响应需靠 minmax() + auto-fit 配合拖拽状态
单纯靠 resize 改变的是某个子元素的宽，不是 Grid 的轨道尺寸；要让它影响列宽，得把该子元素设为 grid-column: span 1，并用 min-width/max-width 限制其尺寸范围，再让 Grid 自动适配（即不写死 grid-template-columns，改用 grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr) 这类弹性定义）。
否则会出现：拖拽后左侧 div 变宽了，但右侧列没收缩，整体溢出容器。
- 推荐列定义方式：
grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr) 250px - 拖拽元素自身设
min-width: 200px、max-width: 600px，值必须是具体单位（px、rem），%会被部分浏览器忽略 - 若同时用了
flex-basis或grid-column-start等显式定位，可能覆盖min/max限制，需优先级排查
移动端和 IE 的现实约束必须提前绕开
iOS Safari 对 resize 的支持形同虚设：手柄不渲染、touch 事件不触发、resize 样式被忽略。IE 所有版本原生不支持。这意味着，如果你的项目需兼容这些环境，resize 只能作为增强功能（progressive enhancement），核心逻辑必须由 JavaScript 补位（监听 mousedown + mousemove + 动态更新 grid-template-columns 内联样式）。
另外，resize 无法触发 ResizeObserver，所以尺寸变化不会自动通知其他逻辑模块——如果需要同步保存到 localStorage 或联动其他面板，仍得靠 JS 监听 element.offsetWidth 变化或封装自定义事件。
真正难的不是拖拽本身，而是让拖拽结果稳定映射到 Grid 轨道、不破坏响应式断点、且在各种缩放/字体设置下保持手柄可用 —— 这些细节往往只在真实设备上反复调试才能暴露。
