Как сделать мозаику из изображений?

Question

[Анастасия]

Всем привет, есть вот такой дизайн галереи с изображениями:


Мне нужно сделать из этого мозаику которая будет повторяться каждых X фотографий. Также нужно сделать так, чтобы макет закрывался - не было ни одной одинокой фотографии.
Никакие библиотеки нельзя использовать (кроме jquery)
Буду благодарна всем за помощь!

Comments

[Егор Живагин]

У вас картинка не загрузилась

[Анастасия]

Егор Живагин, спасибо, обновила

[Владислав Черненко]

что значит из библиотек только jquery? а для чего тогда jquery подключен?))
верставйте ручками тогда, 2 больших блока и по 4 внутри каждого разного размера

[Ankhena]

Гридами повторяющуюся сетку.
Потом вычислять остаток от деления и в зависимости от того, сколько осталось - распределять.
Хотя, конечно, вопрос пропорций остается открытым.

Answer 1

[Александр]

Вот пример одной части

<div class="parent">
<div class="div1">1 </div>
<div class="div2">2 </div>
<div class="div3"> 3</div>
<div class="div4">4 </div>
</div>

.parent {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.div1 { grid-area: 1 / 1 / 5 / 7; }
.div2 { grid-area: 5 / 1 / 11 / 7; }
.div3 { grid-area: 4 / 7 / 11 / 11; }
.div4 { grid-area: 1 / 7 / 4 / 11; }

в div1-4 вставьте картинки, растяните по всей ширине, а далее просто дублируйте
Вот понятная статья
https://webformyself.com/kak-sozdat-galereyu-izobr...