最可靠方式是直接改 grid-template-columns 或用 minmax() + auto-fit；JavaScript 仅在拖拽或状态切换时必要；auto-fit 能自动合并空轨道，而 auto-fill 会留白；隐藏列必须同步更新 grid-template-columns 而非仅用 display: none。
直接改 grid-template-columns 或用 minmax() + auto-fit 是最可靠的方式，JavaScript 干预仅在需要用户拖拽或状态切换时才必要。
用 grid-template-columns: repeat(auto-fit, minmax()) 自动适配列数
这是目前零 JS 实现响应式列宽调整的首选方案。浏览器会根据容器宽度和子项最小尺寸，自动计算能放几列，并把剩余空间平均分配给每列。
-
minmax(280px, 1fr)中的280px不是随便写的：它应匹配内容最小可读宽度（比如含图标+14px 文字+内边距），太小会导致文字挤成一团或换行错乱 - 必须用
auto-fit，不是auto-fill；auto-fill会在容器末尾强行留白，auto-fit会合并空轨道让现有列拉伸填满 - 别在
repeat()里混用固定数量，比如repeat(auto-fit 3, ...)是无效语法 - 搭配
gap控制间距，避免用margin—— 它会干扰 Grid 的轨道计算
隐藏/显示某列时必须同步更新 grid-template-columns
只靠 display: none 隐藏一个网格子元素，不会改变列轨道定义。中间列仍按原比例占位，无法自动扩展。
- 要真正“释放空间”，得动态修改容器的
grid-template-columns值，比如从1fr 3fr 1fr改为1fr 4fr - 推荐用 CSS 变量（如
--col-a: 1fr; --col-b: 4fr;）配合style.setProperty()更新，比字符串拼接style.gridTemplateColumns更稳定，不影响fr计算逻辑 - 如果用类名切换，CSS 中需提前写好两套规则：
.two-col { grid-template-columns: 1fr 4fr; }和.three-col { grid-template-columns: 1fr 3fr 1fr; }
需要用户拖拽调整列宽？resize + ResizeObserver 是唯一可行路径
Grid 容器本身不响应 resize，也不能直接拖拽列。必须把可拖拽列封装成独立块，并手动联动尺寸变化。
立即学习“前端免费学习笔记（深入）”；
- 目标列内部需嵌套一个
<div>，设resize: horizontal、overflow: auto、width: 100%、height: 100% - 用
ResizeObserver监听该<div>的clientWidth，算出像素值后写入 CSS 变量（如--resized-col: 240px） - Grid 容器上写
grid-template-columns: var(--resized-col) 1fr 2fr；不要用 JS 直接拼style.gridTemplateColumns = '240px 1fr 2fr'，否则破坏 fr 单位的弹性行为 - 注意兼容性：旧版 Safari 对
auto-fit和ResizeObserver支持不稳定，必要时加媒体查询兜底
真正容易被忽略的是：列宽响应不是“越灵活越好”。minmax(10px, 1fr) 看似万能，实则会让小屏下出现不可读的窄列；而 display: none 配合 Grid，不改 grid-template-columns 就等于没做适配——这两点在上线前最容易漏测。
