Измените расположение изображений в сетке ⇐ Html

[Anonymous]

Необходимо, чтобы при разрешении экрана менее 900px изображения из Gallery__Top, Gallery__bottom и блока Gallery__ -контента расположены последовательно в двух столбцах и трех рядах, а Gallery__ -контент становится самой первой (это уже было сделано). Это разрешение от 600 пикселей до 900px. Все остальное работает нормально. < /P>

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

.container {
max-width: 1220px;
margin: 0 auto;
padding: 0 10px;
}

.gallery__inner {
display: grid;
grid-template-columns:
minmax(0, 1fr) minmax(0, 780px) minmax(0, 1fr);
row-gap: 2rem;
}

.gallery__top {
grid-column: 1/3;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.gallery__bottom {
grid-column: 2/4;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.gallery__inner img {
border-radius: 10px;
border: 1px solid #a09f9d;
}

.gallery__content {
padding-right: 1rem;
border-radius: 10px;
border: 1px solid #a09f9d;
padding: 0 10px;
}

.gallery__content .gallery__subheader {
margin-bottom: 1.2rem;
}

.gallery img {
display: flex;
width: 100%;
}

@media (max-width: 1200px) {
.gallery__inner {
row-gap: 1rem;
}

.gallery__top,
.gallery__bottom {
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 900px) {

.gallery__top,
.gallery__bottom {
grid-template-columns: repeat(2, 1fr);
}

.gallery__content {
order: -1;
}
}

@media (max-width: 600px) {

.gallery__top,
.gallery__bottom {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
}

.gallery__content {
order: -1;
}
}< /code>



[img]https://i.ibb.co/WN5vVWt7/image-1.jpg[/img]
[img]https://i.ibb.co/rXqckSF/image-2.jpg[/img]

Gallery
Here you can see many different photos and get many
impressions.
Button



[img]https://i.ibb.co/CK7sFf0Q/image-4.jpg[/img]
[img]https://i.ibb.co/qLdXRQKt/image-5.jpg[/img]
[img]https://i.ibb.co/HfQnbNGd/image-6.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/796 ... n-the-grid