Grid容器内resize无效是因为其默认overflow: visible且非可替换元素；需将目标列子元素设为overflow: auto、resize: horizontal的块级元素，并用ResizeObserver监听尺寸变化更新CSS变量控制grid-template-columns。
Grid容器里用resize为什么没反应
因为resize只对可替换元素（如<textarea></textarea>）或overflow: auto|hidden且非display: inline的块级元素生效，而Grid容器默认是overflow: visible，且不触发重设尺寸逻辑。
想让某列可拖拽调整宽度，得把目标列包装成一个独立的、带resize: horizontal的块容器，而不是直接给grid-template-columns加样式。
- 必须给目标单元格内的子元素设
overflow: auto（不能是visible）和resize: horizontal - 该子元素需是块级（如
<div>），且宽高明确（比如<code>width: 100%、height: 100%） - Grid本身不感知
resize事件，后续列宽不会自动重排——你得手动监听resize并更新grid-template-columns - 给可拖拽列的内部
<div>设<code>resize: horizontal; overflow: auto - 用
ResizeObserver监听该<div>的<code>clientWidth，算出当前实际像素宽 - 把该值写入CSS变量（如
--resized-col-width: 240px），然后在Grid容器上用grid-template-columns: var(--resized-col-width) 1fr 2fr - 注意：不要直接拼字符串改
style.gridTemplateColumns，容易破坏fr计算；CSS变量更稳定
如何用JavaScript监听resize并更新Grid列宽
浏览器原生resize事件只触发在window上，对普通<div>无效。得靠<code>ResizeObserver来监听目标元素尺寸变化，再反推列宽。
关键不是“监听拖拽”，而是“监听被拖元素变宽后，如何让Grid其他列自适应收缩”。常见做法是固定一列宽度，其余列用fr单位分配剩余空间。
立即学习“前端免费学习笔记（深入）”；
const ro = new ResizeObserver(entries => {
const w = entries[0].contentRect.width;
document.documentElement.style.setProperty('--resized-col-width', `${w}px`);
});
grid-template-columns中minmax()和auto的区别在哪
这两者都影响动态列宽行为，但机制完全不同：auto按内容撑开，无法限制最小/最大；minmax()才是可控伸缩的核心。
比如想让第一列可拖但不能小于120px、不能大于400px，同时右侧列填满剩余空间，就得组合使用：
-
grid-template-columns: minmax(120px, 400px) 1fr—— 拖拽时浏览器会尊重这个范围，超出即停 -
grid-template-columns: auto 1fr—— 拖拽可能把列缩到0，或撑爆容器，完全不可控 -
minmax(100px, 1fr)是合法写法，表示“至少100px，最多占1份剩余空间”，适合响应式场景 - 注意：
minmax()里的max部分如果是fr，它只在Grid布局计算阶段起作用，不阻止resize拖拽——拖拽仍可能突破，得靠JS+CSS变量兜底
IE和旧版Safari对resize与Grid的支持情况
IE完全不支持resize用于普通元素，也不支持CSS Grid（display: grid需-webkit前缀且功能残缺）。Safari 12.1之前不支持ResizeObserver。
这意味着：纯CSS方案在老环境基本不可行，必须降级为传统表格或Flex布局+手写拖拽逻辑（如mousedown+mousemove）。
- 若需兼容Safari ≤12，
ResizeObserver要加polyfill（如resize-observer-polyfill） - IE11下只能放弃
resize，改用按钮控制列宽（如“放大”“缩小”），或固定列宽 - Grid的
minmax()在Chrome 57+/Firefox 52+/Edge 16+才稳定，旧版本会退化为auto
