fr单位不支持hover动态修改和过渡动画，因其属离散值；应改用transform: scale()模拟缩放，或换flex-grow实现可过渡比例，必要时才用JS重写grid-template-columns。
fr 单位不能在 hover 时动态修改
直接改 grid-template-columns 或 grid-template-rows 中的 fr 值实现“悬停缩放”，是行不通的。CSS 的 fr 是布局计算阶段的静态分配单位，不支持过渡（transition），也不能被 :hover 选择器实时重算比例——浏览器压根不触发重布局来响应这种变更。
常见错误现象：transition: grid-template-columns 0.3s 写了但完全没动画；或者用 JS 强制重写 style.gridTemplateColumns，结果网格项跳变、内容错位、响应式失效。
-
fr不是可动画属性，W3C 明确将其归为「discrete」类型（离散值），无法插值 - 想靠 CSS 自身实现比例变化，得换思路：用
transform: scale()模拟视觉缩放，或用flex-grow/width配合transition - 若真要“让某格变大、邻格自动收缩”，本质是重分配剩余空间——这必须靠 JS 读取容器尺寸、计算新比例、再写回 style，且需防 resize 闪动
用 transform scale + z-index 实现平滑悬停放大
这是最轻量、兼容性最好、也最符合“视觉比例变化”直觉的做法：不改网格结构，只对单个网格项做局部变换。
使用场景：卡片式布局、图库、仪表盘模块，要求悬停时内容突出、不挤压邻居、保持原有网格流。
立即学习“前端免费学习笔记（深入）”；
- 给网格项加
transition: transform 0.25s ease, z-index 0.1s（z-index防止被遮挡） - :hover 里用
transform: scale(1.08)，别超过 1.15，否则边缘裁剪明显 - 必须配
overflow: hidden在父容器或自身，否则放大会溢出 - 如果网格项内有绝对定位元素，记得加
transform-style: preserve-3d避免失真
article {
transition: transform 0.25s ease, z-index 0.1s;
}
article:hover {
transform: scale(1.08);
z-index: 2;
}
用 flex-grow 替代 fr 实现可过渡的比例伸缩
如果非要在“逻辑比例”层面变化（比如悬停时从 1fr → 2fr），把 display: grid 换成 display: flex 是更现实的选择。flex 的 flex-grow 支持过渡，且语义更贴近“按权重争空间”。
参数差异：flex-grow: 1 ≈ 1fr，flex-grow: 2 ≈ 2fr；但注意 flex 容器主轴必须设 width/height，否则 grow 无约束。
- 给 flex 项设
transition: flex-grow 0.3s ease - :hover 里改
flex-grow，例如从1→3，相邻项保持1就会自然压缩 - 移动端要注意：iOS Safari 对
flex-grow过渡支持不稳定，建议加transform: translateZ(0)强制硬件加速 - 别混用
width和flex-grow，否则行为不可预测
JS 动态重写 grid-template-columns 的边界条件
真需要基于 fr 做比例切换（比如三栏变两栏），只能用 JS 计算并写入 style.gridTemplateColumns，但必须处理好三个关键点。
性能影响：频繁读写 layout 触发强制同步重排（layout thrashing），尤其在滚动中悬停极易卡顿。
- 用
getComputedStyle(el).gridTemplateColumns读原始值，别依赖 JS 变量缓存——响应式 media query 切换后值已变 - 改完后立即调用
el.offsetLeft（或任意 layout 读取）强制刷新，避免异步延迟导致动画断层 - 加节流：用
requestAnimationFrame包裹写操作，且同一帧内只执行一次 - 兼容性坑：Firefox 对
grid-template-columns的 CSSOM 支持较晚，旧版需 fallback 到setProperty
复杂点在于：你没法只放大一个格子还保持其他格子“按原 fr 分剩余空间”——因为 fr 是全局分配，一改全变。所以所谓“某格变大”，实际是整个网格模板重定义，这不是微调，是重构。
