fr单位不支持transition，因其属离散类型；应改用transform: scale()或flex-grow实现悬停变大，前者性能好、后者可真正过渡权重。
直接改 grid-template-columns 或 grid-template-rows 里的 fr 值来实现悬停“变大”，是无效的——fr 是离散值，不支持 transition，浏览器根本不会触发重布局动画。
为什么 fr 单位不能在 :hover 中过渡
fr 是 CSS Grid 布局计算阶段的静态分配单位，W3C 明确将其归为「discrete」类型。它不像 width 或 flex-grow 那样可插值，因此写 transition: grid-template-columns 0.3s 完全没反应。
- 常见错误现象：
:hover下强行修改style.gridTemplateColumns，结果网格项跳变、内容错位、响应式失效 - 即使 JS 强刷，也会因 layout thrashing 导致卡顿，且无法与 CSS 动画协同
- 所有主流浏览器（Chrome/Firefox/Safari）均不支持
fr的过渡，这不是兼容性问题，而是规范限制
用 transform: scale() 模拟视觉放大最可靠
不改动网格结构，只对单个网格项做局部变换，性能好、兼容性强、行为可预测。
- 必须给网格项加
transition: transform 0.25s ease，别漏掉ease，否则默认ease虽存在，但显式声明更稳妥 -
:hover里设transform: scale(1.08)，推荐范围 1.05–1.15；超过 1.15 容易边缘裁剪明显或遮挡邻项 - 父容器或网格项自身需设
overflow: hidden，否则放大后内容溢出破坏布局 - 若网格项内含
position: absolute元素，加transform-style: preserve-3d防止失真 - 配合
z-index提升层级，避免被其他格子盖住：加transition: z-index 0.1s，:hover设z-index: 2
想让“某格逻辑上变大、邻格自动收缩”？换 display: flex
如果业务语义确实是“权重重分配”（比如悬停时从占 1 份空间变成占 2 份），flex-grow 是唯一能真正过渡的替代方案。
-
flex-grow: 1≈1fr，flex-grow: 2≈2fr，且支持transition: flex-grow 0.3s ease - flex 容器主轴方向必须有明确尺寸约束（如
width: 100%），否则flex-grow无意义 - 慎用
transition: flex简写，部分旧版 Safari 对该简写支持不稳定，建议拆开写flex-grow - 注意：flex 是一维布局，二维网格结构丢失，响应式断点需重新设计
复杂交互仍需 JS 配合的边界情况
纯 CSS 无法动态读取容器尺寸、实时计算新比例并写回 grid-template-columns，所以以下场景绕不开 JS：
- 悬停时某格跨行/跨列放大，同时挤压其余格子（非单纯缩放）
- 需要精确控制放大后各格剩余空间占比（如“放大格占 60%，其余均分 40%”）
- resize 时保持比例逻辑不闪动，需监听
ResizeObserver并防抖重算 - 移动端 touch 场景下模拟 hover 效果，
:hover不生效，得靠touchstart/touchend切 class
这时候不要硬套 CSS 过渡，老实用 JS 控制类名 + transform 或 flex-grow 更稳。真正难的不是写动画，而是判断什么时候不该用 CSS 动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
