CSS网格：使用纯CSS（媒体查询）对列数进行动画过渡

Question

我使用不同的媒体查询来更改CSS网格的列数，具体取决于浏览器的宽度。当网格框根据此更改其位置时，我想实现某种动画效果。使用纯CSS如何实现？

部分代码：

.wrapper {
width: 100%;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(6, 300px);
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);
  }
}

Answer 1

这是不可能对于CSS。

列或行的数量不可设置动画。同样，网格区域不是元素，因此无法使用CSS进行选择。

Grid Template Columns

动画类型：长度，百分比或计算的简单列表，但唯一的区别是列表中的长度，百分比或计算分量的值。