Как наложить блоки друг на друга, типа как в тетрисе

Question

Видел на imgur и некоторых других, вид материалов (блоки с картинками и ссылками на страницы картинок) накладываются друг на друга как в тетрисе, типа идет блок, затем следующий и следующий и у всех разная высота. На следующей линии блоки стоят уже прижатыми друг ко другу, в плане, что нет лишних отступов и пробелов. Блоки стоят так, будто доски разных размеров друг на друга наложили. Это очень красиво и, одновременно, не совсем понятно. Пожалуйста, объясните как это работает на примере вашего/не-вашего кода. Реализуется это с помощью лишь CSS&HTML или нужен еще и JS? Спасибо за выделенное мне время за прочтение до этого момента. Мир вашему дому.

Answer 1

можно через свойства column-count (задает количество колонок) + display:inline-block (не дает разрывать большие элементы между колонками)

.block {
  column-count: 3;
}

.item {
  display: inline-block;
  margin: 10px 5px;
  border: 1px solid black;
  background-color: green;
}

<div class="block">
  <div class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum, esse.</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus quasi delectus in repudiandae vitae mollitia dolorem tempora nam maxime ducimus, quidem quae sequi deleniti alias recusandae asperiores minus nulla aperiam atque perferendis? Quod vel illo laudantium dolorem! Voluptatem, earum. Quos architecto quidem minus vero mollitia harum, sit tempore maxime sequi.</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores quia explicabo voluptas, eos sit nisi architecto ipsam pariatur dignissimos sint adipisci illo? Vitae ea saepe assumenda eligendi magnam porro dignissimos!</div>
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat sed minus ut expedita sit autem quia nulla distinctio! Earum, velit quas voluptas quae vero sunt aliquam cum eos unde excepturi maxime, obcaecati porro aspernatur exercitationem vitae itaque cupiditate libero molestias quibusdam tenetur perferendis accusamus sint at! Asperiores reprehenderit sunt natus ducimus neque incidunt ullam, optio facilis quod, repudiandae, pariatur impedit. Accusamus id neque nulla quia dolorum esse nobis. Nobis quod tempora sed similique. Officia qui animi consequatur esse, molestias fuga aspernatur suscipit reprehenderit dolorum exercitationem quibusdam neque repudiandae ullam eveniet placeat culpa beatae explicabo ipsa aliquid cum id atque?</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, ab tenetur maxime praesentium accusantium quibusdam!</div>
  <div class="item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore mollitia fugiat inventore dolores vitae odio omnis sunt quos laborum et?</div>
  <div class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi, officiis culpa ullam aliquam beatae consequatur maxime autem at, enim est aliquid laboriosam fugiat, earum alias obcaecati nobis molestias error porro? Et dolores error nihil, corrupti, beatae reiciendis, qui atque harum possimus est doloremque aperiam hic exercitationem excepturi fugiat mollitia! Earum voluptas eum illum aut! Sunt reiciendis culpa porro delectus praesentium impedit a, quae dolores deleniti facere aperiam, inventore, blanditiis aspernatur.</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus cumque voluptatem eius pariatur et quidem, reprehenderit vero maxime voluptatum veritatis sint nesciunt! Nihil repellendus molestiae quia error impedit id minus cumque rem modi fuga facere at tenetur nemo fugiat suscipit cum, officiis laboriosam in nesciunt commodi dolorum dolores quaerat similique eius? Harum qui laudantium iste corporis. Dolor distinctio accusantium totam officiis at! Molestias, ratione sapiente explicabo fuga reprehenderit consectetur ut optio facilis facere ipsam quaerat corrupti? Provident dignissimos aliquid autem. Magnam voluptatibus optio facere commodi dignissimos rem quibusdam perferendis iusto.</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta doloremque iusto voluptas tenetur at repellendus!</div>
  <div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero accusantium minus recusandae soluta odit nobis rem consequuntur earum dolore exercitationem eligendi quibusdam odio rerum praesentium sit impedit sapiente natus iste non, nihil aliquam tempora mollitia! Est, non quos! Illo, reiciendis.</div>
</div>

БЛОГ НА HUSL

Как наложить блоки друг на друга, типа как в тетрисе

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