grid-template-columns 不支持 transition 动画，因其为离散布局属性，无法插值；应使用 auto-fit + minmax() 实现自然列数响应，或借助 animate-css-grid 协调项目位移。
为什么 grid-template-columns 直接加 transition 没反应
写了 transition: grid-template-columns 0.3s 却没动画？不是你漏了 vendor 前缀，也不是 CSS 顺序错了——是浏览器根本不会处理它。因为 grid-template-columns 是离散布局定义（比如 "1fr 2fr auto"），不是数值型属性，无法插值。Chrome、Safari、Firefox 全部静默忽略，不报错、不警告、不动画。
用 minmax() + auto-fit 实现列数自动切换
真正能响应宽度变化并“平滑”调整列数的，是 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 这类写法。它不依赖 JS，也不靠动画帧，而是让 Grid 引擎在重排时自然过渡列数。
-
minmax(280px, 1fr)设定每列最小宽度门槛，低于该值就减少一列 -
auto-fit会合并空轨道，避免留白；auto-fill则保留所有轨道，慎用 - 列数跳变点由容器宽度和
gap共同决定：实际可用宽度 = 容器宽 −gap × (列数 − 1) - 别用
%或em做minmax()下限，它们随上下文浮动，跳变更难预测
列数变化时视觉“卡顿”的真实原因
你以为是动画不够顺？其实多数卡顿来自重排本身：当窗口 resize 触发 Grid 重新计算列数，所有子项位置批量重置，浏览器来不及渲染中间状态。这不是 bug，是 layout 阶段的固有开销。
- 用
transform或opacity做视觉补偿（比如缩放容器、淡入新布局）能掩盖跳变，但不改变 DOM 位置 - 如果必须保真语义（如屏幕阅读器焦点、JS 坐标计算），就别强行“模拟动画”，接受重排的瞬时性
- DevTools 的 Layout 面板开启 “Show grid line numbers”，拖动窗口看列数何时跳变，比肉眼判断更准
- 移动端 Safari 对
max-width过渡支持不稳定，此时优先走transform: scaleX()+opacity路线
复杂响应式场景推荐 animate-css-grid
当你需要同时动 grid-template-columns、gap、grid-column，且要求每个项目位移协调不跳位，纯 CSS 已超出能力边界。
- 引入后只需两行：
import { wrapGrid } from 'animate-css-grid'→wrapGrid(document.querySelector('.grid')) - 它不改原始 Grid 定义，而是用
transform在渲染层补帧，DOM 结构和可访问性完全保留 - 注意它依赖
getBoundingClientRect()快照对比，所以别在动画中同步修改容器height或display - 真正麻烦的从来不是“怎么让列数变”，而是“怎么让 12 个卡片在从 4 列切到 2 列时，各自滑向正确终点而不互相遮挡”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
