Почему моя CSS-сетка не выравнивает карточки в 3 столбца на широких экранах (медиа-запрос не работает)? ⇐ Html

[Anonymous]

Я пытаюсь отобразить список карточек в 3 столбца, когда ширина экрана превышает 1024 пикселя, но сетка остается в одном столбце даже на рабочем столе.
Вот мой HTML и CSS:

Код: Выделить всё

.cards {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}

@media screen and (min-width: 1024px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}

Код: Выделить всё

Card 1
Card 2
Card 3

Ожидаемое поведение
Я ожидал, что макет переключится на 3 столбца на рабочем столе, но он останется одним столбцом.
Что я пробовал

• Жесткое обновление/очистка кэша.
• Проверено в Chrome и Firefox.

Вопрос
Что я упускаю или делаю неправильно в своем медиа-запросе?

Подробнее здесь: https://stackoverflow.com/questions/798 ... edia-query