通过CSS Grid与动画结合，可实现子元素动态重排。先用Grid定义3×2布局并设置过渡效果，再通过类切换触发grid-column和transform动画，实现平滑位移与扩展；结合媒体查询使小屏幕下自动调整为两列并添加淡入动画；通过JavaScript点击切换类名实现交互式扩展，利用transition保障流畅性，避免直接动画化grid参数以确保兼容性。
当CSS动画与Grid布局结合使用时，可以实现子元素的动态排列效果，让页面布局更富交互性和视觉吸引力。Grid提供了强大的二维布局能力，而动画则能让这些布局结构“动起来”，比如实现网格项的自动重排、渐变位移、尺寸变化等效果。
利用Grid定义基础布局
先通过CSS Grid创建一个灵活的网格容器，为后续动画打下基础。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
padding: 20px;
}
.grid-item {
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.5s ease, grid-column 0.5s ease;
}
这里定义了一个3×2的网格，每个项目带有过渡效果，为动画做准备。
通过类切换触发动画重排
借助JavaScript或:hover等状态，动态更改子元素的grid-column或grid-row属性，配合transform实现平滑移动。
.grid-item.move-right {
grid-column: 3;
transform: translateX(100%);
}
.grid-item.expand {
grid-column: span 2;
}
当给某个子元素添加move-right类时，它会向右平移并跨列显示。transition确保这个过程是动画化的，而不是瞬间跳转。
实现响应式动态排列
结合媒体查询和动画，可以让网格在不同屏幕尺寸下自动重新排列，并加入入场动画效果。
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
animation: slideIn 0.6s forwards;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
在小屏幕上，网格自动调整为两列，同时每个项目从下方淡入，增强用户体验。
JavaScript控制动态排序
通过脚本动态修改元素的网格位置，实现点击或定时触发的重排动画。
document.querySelectorAll('.grid-item').forEach(item => {
item.addEventListener('click', function() {
this.classList.toggle('expand');
});
});
点击某个网格项时，它会扩展占据两列空间，其他项自动避让，整个过程因transition而显得流畅自然。
基本上就这些。将Grid的布局灵活性与CSS动画结合，能创造出既实用又美观的动态界面效果，无需JavaScript频繁操作DOM，性能也更有保障。关键在于合理设置transition属性和使用支持动画的CSS属性（如transform、opacity），避免直接动画化grid参数本身（部分浏览器支持有限）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
