如何通过纯CSS（媒体查询）实现CSS Grid列数切换的过渡动画？

问题描述 #

我现在用媒体查询根据浏览器宽度调整CSS Grid的列数，但网格项切换位置的时候没有过渡效果，想知道怎么用纯CSS实现这个动画？目前我的代码是这样的：

.wrapper { 
  width: 100%; 
  display: grid; 
  grid-gap: 20px; 
  grid-template-columns: repeat(6, 300px); 
  /* 注意：这里有语法错误，repeat的参数格式应为repeat(次数, 值) */
  grid-template-rows: repeat(10), 300px); 
} 

@media only screen and (max-width: 1960px) { 
  .wrapper { grid-template-columns: repeat(5, 300px); } 
} 

@media only screen and (max-width: 1460px) { 
  .wrapper { grid-template-columns: repeat(4, 300px); } 
}

解决方案 #

首先得说明：CSS Grid本身不支持直接对grid-template-columns这类离散属性的过渡动画，因为列数变化是跳跃式的。不过我们可以用一些小技巧模拟出平滑的位置过渡效果，下面是两种可行的纯CSS方案：

方案一：给网格项添加transform过渡（最贴合需求）

这个思路是让浏览器自动计算网格项在列数变化前后的位置差异，通过transform属性实现平滑移动。核心是给每个网格项添加过渡规则，同时保持网格的自动流式布局。

修改后的完整代码：

.wrapper {
  width: 100%;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(6, 300px);
  /* 修正语法错误 */
  grid-template-rows: repeat(10, 300px);
  /* 保持默认自动流式布局，不要设置grid-auto-flow: dense，否则可能破坏过渡效果 */
}

/* 关键：给所有网格项添加过渡规则 */
.wrapper > * {
  position: relative;
  /* 可自行调整过渡时长和缓动函数 */
  transition: transform 0.3s ease-in-out;
}

/* 保留原有媒体查询逻辑 */
@media only screen and (max-width: 1960px) {
  .wrapper {
    grid-template-columns: repeat(5, 300px);
  }
}

@media only screen and (max-width: 1460px) {
  .wrapper {
    grid-template-columns: repeat(4, 300px);
  }
}

注意：这个方案在Chrome、Firefox、Edge等现代浏览器中效果很好，但Safari支持有限。如果需要兼容Safari，可以把过渡规则改成transition: all 0.3s ease-in-out，不过性能会略差一点。

方案二：用auto-fit+minmax实现平滑列宽过渡（更灵活）

如果你的需求可以接受通过调整列宽间接改变列数，这个方案兼容性更好，过渡效果也更自然。核心是利用auto-fit让Grid自动适配屏幕宽度，同时给列宽和间隙添加过渡。

代码示例：

.wrapper {
  width: 100%;
  display: grid;
  gap: 20px;
  /* 使用auto-fit和minmax，让列数自动适应屏幕宽度 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(10, 300px);
  /* 给间隙和列宽添加过渡 */
  transition: gap 0.3s ease, grid-template-columns 0.3s ease;
}

/* 通过调整minmax的最大值，间接控制列数 */
@media only screen and (max-width: 1960px) {
  .wrapper {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1.2fr));
  }
}

@media only screen and (max-width: 1460px) {
  .wrapper {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1.5fr));
  }
}

这个方案的好处是列数变化时，列宽会平滑收缩/扩展，同时网格项的位置也会跟着自然移动，几乎没有兼容性问题。

内容的提问来源于stack exchange，提问作者Sandra