Как расположить div'ы разного размера так рядом так, чтобы они заполняли все свободное пространство?

Question

Есть условно 20 дивов, ширина у всех одинакова, но высота разная. Они идут в ряд, и когда начинается новая строка блоков, они оставляют пустые места над собой и идут по линии, выравниваясь по верхней грани. Как сделать заполнение всех свободных мест, если это возможно? Прикладываю скрин. Нужно чтобы News 25, News 26 поднялись выше, заполнив пустое пространство, а не выравнивались все по одной высоте. Результат должен быть похож на подобие "стикеров", пусть и с одинаковым марджином, но с разной позиционкой, более хаотичной.

Что хотел бы получить:

Заполнение автоматическое, и нужно чтобы между блоками не было пустого пространства. Они все еще идут в ряд, но при этом если сверху есть место - он поднимется выше. Можно как-то через столбцы, но не понимаю как. Ширина у всех одинаковая.

Answer 1

вроде то что надо

UPD:

добавил хаоса
чекбокс включил для ясности, что это именно чекбокс а не какой то квадратик...)

UPD 2:

добавил выключенных чекбоксов и раскидал разные спаны по ним для наглядности

#x{
display: grid;
grid-template-columns: repeat(18, 1fr);
grid-auto-rows: 1.5em;
grid-auto-flow: dense;
grid-gap: .5em;
}


li{
  background: gray;
  border-radius: 5px;
  list-style: integer inside;
}


#x *{grid-area: span 2 / span 2;}
/* щепотка хаоса по вкусу... */
#a:checked ~ :nth-child(7n -3){
grid-area: span 3 / span 2;
background: gold;}

#b:checked ~ :nth-child(11n -10){grid-area: span 4 / span 3}
#c:checked ~ :nth-child(11n -9){grid-area: span 3 / span 1;}
#d:checked ~ :nth-child(11n -8){grid-column: span 1;}
#e:checked ~ :nth-child(11n -5){grid-row: span 3;}
#f:checked ~ :nth-child(11n -6){grid-column: span 3;}
#g:checked ~ :nth-child(11n -4){grid-row: span 4;}
#h:checked ~ :nth-child(11n -7){grid-column: span 4;}
#i:checked ~ :nth-child(11n -2){grid-area: span 1 / span 2;}
#j:checked ~ :nth-child(11n -1){grid-area: span 3 / span 3;}
#k:checked ~ :nth-child(11n){grid-area: span 1 / span 1;}

<ol id='x'>
<input type='checkbox' id='a' checked>
<input type='checkbox' id='b'>
<input type='checkbox' id='c'>
<input type='checkbox' id='d'>
<input type='checkbox' id='e'>
<input type='checkbox' id='f'>
<input type='checkbox' id='g'>
<input type='checkbox' id='h'>
<input type='checkbox' id='i'>
<input type='checkbox' id='j'>
<input type='checkbox' id='k'>

  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
</ol>

Answer 2

Нативное решение - использование columns. Конечно, есть один существенный недостаток - это неравномерность заполнения колонок, что хорошо заметно по нижнему краю. Из плюсов: адаптивность, минимум кода и настроек, отсутствие скриптов и сторонних ресурсов.

/* Скрипт нужен только для сокращения HTML-разметки в текущем примере */
const LIST = document.querySelector('.news_list');
for (let i = 1; i < 15; i++) {
  LIST.insertAdjacentHTML('beforeend', `
  <div class="news_item">
    <div class="news_title">News ${i}</div>
    <div class="news_text"><img src="https://loremflickr.com/240/160?lock=${Math.floor(Math.random() * 30000 + 1)}">${'Lorem ipsum dolor sit amet. Amet, rem fugit. Atque, quo quae quos? Doloribus odit quis vitae nisi culpa totam, hic ab aut nobis eos, ipsam est. '.repeat(Math.floor(Math.random() * 5 + 1))}</div>
    <div class="news_author">Author: <span>admin</span></div>
  </div>
  `)
}

body { margin: 0; min-height: 100vh; background-color: #f2eaed; }

.news_list {
  padding: 20px 10px 0;
  /* Собственно сами колонки */
  column-width: 300px;
  column-gap: 30px;
}

.news_item {
  margin-bottom: 2.5em;
  border: 1px solid #d2d2d2;
  border-radius: .66em;
  box-sizing: border-box;
  overflow: hidden;
  font: 12px/1.8em sans-serif;
  background-color: #fff;
}

.news_title {
  padding: 1.8em 1.5em 1em;
  font: bold 1.4em/1em sans-serif;
}

.news_text {
  min-height: 10em;
  padding: 0 2.1em 1.3em;
  border-bottom: 1px solid #d2d2d2;
  box-sizing: border-box;
  font: 1em/1.8em sans-serif;
}

.news_text > img {
  float: right;
  height: 8em;
  aspect-ratio: 3 / 2;
  padding: .5em 0 0 .75em;
}

.news_author {
  padding: 2em;
  font: 1em/1em sans-serif;
  letter-spacing: .5px;
  color: #565a5c;
  background-color: #f8f8f8;
}

<div class="news_list"></div>

БЛОГ НА HUSL

Как расположить div'ы разного размера так рядом так, чтобы они заполняли все свободное пространство?

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