CSS 网格 : Animate transition of number of columns using pure CSS (media queries)

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

Animation type:simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list.