Как я могу сделать свой «display: Grid» отзывчивым с помощью медиа-запросов для мобильных устройств и планшетов? ⇐ CSS

[Anonymous]

Вид на рабочем столе в виде сетки
Я хочу сделать это представление в виде сетки для рабочего стола адаптивным на мобильных устройствах, используя медиа-запросы в моем CSS. Он идеально расположен на настольных компьютерах, но не реагирует на мобильные устройства и планшеты.

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

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
gap: 25px;
}

/** Media Queries **/
@media screen and(max-width: 400px) {
.grid-container {
grid-template-columns: auto;
}
.grid-container .item-1 {
grid-column: 1 / span 5;
grid-row: 1;
}
}

Я создал сетку из 5 столбцов для 5 разных элементов (карточек). Тогда пункт 1 охватывает первые три столбца. Элемент 3 – из строк 1–3, а элемент 5 – из столбцов 2–5.

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

.item-1 {
grid-column: 1 / span 3;
grid-row: 1;
height: auto;
background-color: hsl(263, 55%, 52%);
position: relative;
}
.card-detail {
position: absolute;
top: 59px;
}

.item-3 {
grid-column-start: 5;
grid-row-start: 1;
grid-column-end: 6;
grid-row-end: 3;
background-color: hsl(0, 0%, 100%);
}

.item-5 {
grid-column-start: 2;
grid-column-end: 5;
background-color: hsl(219, 29%, 14%);
color: hsl(0, 0%, 100%);
}

Я хочу, чтобы ширина каждого элемента сетки на мобильных устройствах занимала 100 % ширины. На планшетах я хочу, чтобы элементы сетки занимали 50 % (это по 2 элемента в каждой строке).

Подробнее здесь: https://stackoverflow.com/questions/781 ... obile-devi