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

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

Мне нужно сделать из этого мозаику которая будет повторяться каждых X фотографий. Также нужно сделать так, чтобы макет закрывался - не было ни одной одинокой фотографии.
Никакие библиотеки нельзя использовать (кроме jquery)
Буду благодарна всем за помощь!
  • Вопрос задан
  • 528 просмотров
Пригласить эксперта
Ответы на вопрос 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...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы