Сетка 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.

Столбцы шаблона сетки

Тип анимации: простой список длины, процентов или вычислений, при условии, что единственные различия заключаются в значениях компонентов длины, процентов или вычислений в списке.