grid-template-columns 不支持 transition，因其为声明式语法而非数值型属性，浏览器无法在不同轨道结构间插值；可用 grid-template-rows + 0fr/max-content 实现高度收放，或 transform 模拟列宽变化，或借助 animate-css-grid 库处理复杂重排。
grid-template-columns 本身不能直接 transition，浏览器不支持对这类“生成式布局结构”属性做插值动画。你加了 transition: grid-template-columns 0.3s，它只会静默失效，没有任何报错，也没有任何中间帧。
为什么 grid-template-columns 无法过渡
它不是数值型属性，而是描述“如何划分轨道”的声明式语法（如 "1fr 2fr auto"）。浏览器无法在两组不同结构之间线性插值——比如从 "1fr 1fr" 到 "1fr 2fr 1fr"，中间状态没有定义意义。
- 规范层面不支持：CSS Transitions spec 明确排除
grid-template-columns、grid-template-rows、grid-template-areas - 常见错误现象：列数突变、内容瞬间重排、无缓动、无位移轨迹，用户感知为“闪烁”或“跳变”
- 即使所有值都是固定像素（如
"200px 300px"→"250px 250px"），Chrome/Safari/Firefox 仍不支持过渡
用 grid-template-rows 实现高度收放动画（真正可行的替代方案）
这是目前唯一原生支持“0 ↔ 内容自适应”语义的 Grid 动画路径，适用于折叠/展开区域（如 FAQ、侧边栏、响应式面板）。
- 核心是用
0fr表示“完全收起”，1fr或max-content表示“按需展开” - 必须配合
overflow: hidden防止内容溢出破坏视觉连贯性 - 父容器需设为
display: grid，目标内容作为其直接子项（即网格项） - 示例：
/* 父容器 */
.container {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.4s ease-out;
}
.container.expanded {
grid-template-rows: max-content;
}注意：max-content 在 Firefox 70+、Chrome 66+、Safari 16.4+ 支持良好；若需更兼容，可用 1fr + 显式 height 控制。
立即学习“前端免费学习笔记（深入）”；
用 transform 模拟列宽变化的视觉动效
当你要的是“看起来像列在伸缩”，而不是真改变轨道定义，transform: scaleX() 是最轻量、高性能的兜底手段。
- 对每个网格项单独加
transform，配合transition: transform 0.3s - 避免影响布局流：它只改渲染层，DOM 位置和可访问性仍由 Grid 正确定位
- 适合场景：卡片宽度随列数变化而轻微缩放、悬停时单列放大、响应式断点切换时的视觉缓冲
- 风险点：多个
transform同时触发可能造成视觉错位，需统一 stagger 延迟或用 JS 协调
用 animate-css-grid 库接管整个容器动画
如果你需要项目级位置移动（比如拖拽排序、数据刷新后重排）、间隙变化（gap）、甚至跨断点的列模板切换，animate-css-grid 是目前最省心的方案。
- 它不尝试动画
grid-template-columns，而是监听 DOM 变化，计算每个子元素旧/新位置差，用transform补足视觉过渡 - 只需包装容器：
wrapGrid(document.querySelector('.grid')) - 可配置
duration、easing、stagger（如{ duration: 500, stagger: 80 }） - 注意：它依赖
getBoundingClientRect()，若容器有transform或overflow: hidden外层包裹，可能影响位置计算精度
真正难的不是“怎么让它动”，而是判断该动什么——是视觉位移、结构收放，还是布局语义切换。选错目标属性，再写十遍 transition 都没用。
