html多列布局不支持拖拽调整列宽，因其无列级dom节点和事件钩子，仅能通过重设column-width、column-count、column-gap三个css属性触发重排实现动态控制。
HTML多列布局（column-count/column-width）本身不支持拖拽或JS动态调整列宽——它没有列级DOM节点，也没有事件钩子。所谓“动态调整”，实际只能靠重设CSS属性触发浏览器重排。
为什么不能像表格那样拖拽调整每列宽度
多列布局是纯CSS流式分栏机制，底层由渲染引擎对块内容做切片处理，<div>内部没有<code><col>、没有可绑定事件的列容器，也无法用ResizeObserver监听某“列”的尺寸变化。你看到的“列”，只是视觉分段，不是独立可操作的元素。
- 无法给“第2列”加
mousedown监听器——它根本不是一个DOM节点 -
getComputedStyle(el).columnWidth返回的是初始声明值，不是实时渲染后的实际像素宽度 - 改
el.style.columnWidth = '18rem'会触发重排，但无法知道哪一列被拉宽了、宽了多少
能动态控制的只有三个CSS属性
真正可JS干预的只有这三项，且必须作用于多列容器本身（如<article></article>）：
-
column-width：设为具体长度值（px、rem等），浏览器据此动态计算列数；设auto则退回到内容自适应模式 -
column-count：设为整数，强制列数；设auto则交由column-width主导 -
column-gap：影响列间空隙，间接改变每列可用宽度；但注意它不参与column-width的计算基准
示例：想让当前列宽变窄 20px，不要尝试“找到第3列DOM”，而是：
const container = document.querySelector('.multi-col');
const cur = parseFloat(getComputedStyle(container).columnWidth) || 16;
container.style.columnWidth = (cur - 20) + 'px';
响应式切换比运行时拖拽更可行
在真实项目中，用户“动态调列宽”的需求，90%以上可通过媒体查询+状态类切换满足，且更稳定：
- 用
data-col-preset="narrow"标记容器，配合CSS规则：[data-col-preset="narrow"] { column-width: 12rem; } - 按钮点击切换
dataset.colPreset，避免频繁内联样式污染 - 移动端直接用
@media (max-width: 768px) { .multi-col { column-count: 1; } }，比JS计算更轻量 - 若需保存用户偏好，存
column-width值到localStorage，刷新后恢复即可
真要模拟拖拽？得换技术栈
如果设计稿明确要求“每列可独立拖拽缩放”，说明这不是多列布局场景——那是卡片网格或可配置仪表盘。此时应放弃columns，改用：
- CSS Grid：每列对应一个
grid-column轨道，可用grid-template-columns动态更新，配合ResizeObserver监听容器变化 - Flexbox + 手动计算：每个“列”是
<section></section>，监听分隔线mousemove，实时改相邻两项的flex-basis - 第三方库如
react-grid-layout或interact.js，它们封装了拖拽逻辑和尺寸同步
强行在columns上做拖拽，最后只会陷入“鼠标位移→算列索引→猜像素→重设column-width→重排→再取宽→循环抖动”的死循环。
