Организация изображений в сетке ⇐ Html

[Anonymous]

Please help me make it through media queries so that when the screen resolution is less than 900px, the images are arranged sequentially in two columns and three rows, and at the same time image-3.jpg becomes the very first.

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

.gallery__inner {
display: grid;
grid-template-columns:
minmax(0, 1fr) minmax(0, var(--max-width)) 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 img {
display: flex;
width: 100%;
}< /code>



[img]images/image-1.jpg[/img]
[img]images/image-2.jpg[/img]
[img]images/image-3.jpg[/img]

[img]images/image-4.jpg[/img]
[img]images/image-5.jpg[/img]
[img]images/image-6.jpg[/img]

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