Только начали с гридами знакомиться? Нет ничего плохого в использовании media. Пользуйтесь этим, единственное что, нет смысла задавать диапазон. Если ваш подход desktop first используйте max-width и всё.
@media (max-width: 1199px) {
/* Код для экранов уже 1200px */
}
@media (max-width: 991px) {
/* Код для экранов уже 992px */
}
@media (max-width: 768px) {
/* Код для экранов уже 767px */
}
@media (max-width: 576px) {
/* Код для экранов уже 575px */
}
По моему субъективному мнению grid-area стоит использовать только для лайоута всего сайта/страницы - распределить с помощью этого header, sidebar, main, footer. В контексте отдельного блока, особенно такого как у вас это не удобно и не гибко.
Вместо этого используйте grid-column, grid-row для того чтобы задать положение блоков в нужных ячейках.
И grid-template-columns конфликтует с grid-area. Вы уменьшаете количество колонок, но grid-area создает их все так же 4 помещая последнюю в область не явной сетки.
То есть на ширине меньше 1024px у вас должно быть 3 колонки судя по этому grid-template-columns: 0.5fr 0.4fr 0.4fr; а по факту их 4.
Конечно зависит от контекста проекта, но в общем container не должен быть grid так как обычно он используется для ограничения контентной области всей страницы или он может быть grid но не для этого блока, а для всего контента, с другими параметрами. Обычно контейнеру задают какую то max-width разную в разных точках остановки и margin: 0 auto для центрирования. И это можно так же заменить на grid.
Например grid-template-columns: minmax(0, 1fr) minmax(0, 1200px) minmax(0, 1fr); что сделает тоже самое но гридом.
То есть правильным было бы внутрь контейнера поместить родительский grid блок со всеми айтемами. А у контейнера совершенно другая задача.
В общем сейчас нечего корректировать, надо переделать, чтобы с этим можно было работать при адаптации
Простой
