grid-template-areas 无法过渡，因其为离散值；应改用 transform + opacity 实现视觉动画，或通过类名切换配合入场/退场效果。
grid-template-areas 变化无法过渡，别白费力气
直接改 grid-template-areas 不会触发任何 CSS 过渡，浏览器根本不支持对这个属性插值。你看到的“跳变”不是过渡没生效，而是压根没走动画流程——它属于离散值（discrete value），就像切换 display 一样，只有重排，没有中间帧。
常见错误是写一堆 transition: grid-template-areas 0.3s，结果毫无反应，连控制台警告都没有。
- 真正能过渡的属性只有
transform、opacity、background-color等可计算中间值的类型 - 若想让元素“移动”，得靠
transform: translate()模拟位移，而不是改grid-area或grid-column - 如果必须用
grid-area切换布局结构，建议配合类名切换 +opacity或scale做入场/退场动画，视觉上更可控
用 transform + grid-column 实现卡片平滑移位
想让一个卡片从第 1 列第 1 行“滑”到第 2 列第 3 行？不能靠改 grid-column 或 grid-row——这些属性不可过渡。但你可以保留它在网格中的原始位置，再用 transform 把它“推”过去。
关键点在于：先用 JS 获取目标单元格的像素坐标（getBoundingClientRect()），再结合当前位置算出偏移量，最后用 transform: translate() 补足。
- 确保容器设了
position: relative，子项设position: absolute时才好精确定位 - 避免同时设
grid-column和transform冲突——要么纯 Grid 定位 + transform 微调，要么全交给 transform 控制 - 动画结束后，可同步更新
grid-column和grid-row值，保持 DOM 结构与视觉一致（尤其影响屏幕阅读器）
grid-template-rows: masonry 不支持动态重排，图片加载后不会重算
grid-template-rows: masonry 只在首次渲染时计算一次高度分布。图片异步加载完成、内容展开、字体加载导致高度变化后，它不会自动重排——空白、错位、重叠都可能发生。
这不是 bug，是规范行为。Masonry 引擎不监听尺寸变化，也不响应 ResizeObserver。
- 必须提前占位：
img { aspect-ratio: 4/3; width: 100%; height: auto; }是底线 - 服务端最好预设宽高比，或用
padding-top做骨架占位 - JS 方案里若用
ResizeObserver监听容器，也得手动触发重排（比如强制container.style.display = 'none'; container.offsetHeight; container.style.display = '';） - 别指望
@supports (grid-template-rows: masonry)能帮你判断是否“已稳定”，它只反映语法支持，不反映渲染状态
column-count + break-inside 是最稳的 fallback，但 hover 动画会闪烁
当 grid-template-rows: masonry 失效（Safari/Firefox/旧 Chrome）或内容动态变化时，column-count 是唯一无需 JS、首屏即呈现的替代方案。但它有个隐蔽坑：hover 动画可能在列间“跳闪”。
原因是多列布局下，浏览器会把子项按流式顺序切分到各列，而 hover 改变尺寸（比如加 border、shadow）可能触发重新分列，造成视觉抖动。
- 给子项统一设
width: 100%，避免因 margin/padding 差异导致列宽波动 - hover 效果尽量只用
transform和opacity，避开影响盒模型的属性 - 若需加边框，提前预留透明边框：
border: 2px solid transparent，hover 时只改 color -
break-inside: avoid必须作用于直系子元素；中间套了 wrapper 就得把该声明移到 wrapper 上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
