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

Question

Сижу ломаю голову, как их так сделать, пробовал и flex, можно конечно сделать через position relative, но как-то слегка извращенно. Есть способ попроще? Т.е, мне даны такие фотографии, их нужно расставить так, как на картинке

Answer 1

const generateImgBlock = () => `<div class="img-container">
    <img src="https://picsum.photos/${Math.ceil(Math.random()*100+200)}/${Math.ceil(Math.random()*300+150)}"/>
  </div>`

document.querySelector(".gallery").innerHTML = Array(30).fill('').reduce((sum) => sum + generateImgBlock(), "");

:root {
  --cols-count: 4;
}

body {
  background-color: #022;
}

.gallery {
  width: 600px;
  margin: 15px auto;
  column-count: var(--cols-count);
  column-gap: 17px;
  column-width: calc(100% / var(--cols-count));
}

.img-container img {
  width: 100%;
  display: block;
  margin-bottom: 17px;
}

<div class="gallery"></div>

БЛОГ НА HUSL

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

Ответы (1 шт):