(CSS) Как сделать сетку, заполняющая пропуски в себе

Question

Имеется сетка, которую надо привести в такой вид:

Есть ещё один пример, который вы можете пощупать. Меняйте размер окна и посмотрите как всё адаптируется и слаживается: https://959o8.csb.app/

Но мне нужно добиться именно такого вида, как я показывал на картинке выше - блоки имеют полностью статическую и неизменную широту, но у них всегда будет меняться высота и вне зависимости от этого они должны сохранять адекватный вид сетки и заполнять пропуски. Ссылка лишь показывается в действии то, что хочу передать через скриншот.

Как это можно реализоваться через CSS и JS? Если это невозможно ванильным путём, то можете показать как вы можете грамотно реализовать такую сетку, используя либо masonry.js, либо muuri.js, либо что-то своё.

(Именно masonry.js и muuri.js показались мне самыми лучшими вариантами, когда я искал решение проблемы, но проблема в том, что я не могу понять эти библиотеки)

Answer 1

Старый добрый column-count справляется с этим на ура

.items {
  width: 400px;
  margin: auto;
  column-count: 2;
  column-gap: 10px;
}

.item {
  border: 1px solid red;
  width: 100%;
  break-inside: avoid-column;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item:not(:first-child) {
  margin-top: 10px;
}

.i1 {
  height: 200px;
}

.i2 {
  height: 250px;
}

.i3 {
  height: 150px;
}

.i4 {
  height: 300px;
}

<div class="items">
  <div class="item i2">1</div>
  <div class="item i1">2</div>
  <div class="item i2">3</div>
  <div class="item i1">4</div>
  <div class="item i3">5</div>
  <div class="item i4">6</div>
</div>

БЛОГ НА HUSL

(CSS) Как сделать сетку, заполняющая пропуски в себе

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