Есть вот такой код.
1) Как сделать, чтобы элемент №3 не ломался на 2 части? [Решение уже получено в ответе.]
2) Как убрать расстояние между колонками? То есть чтобы вторая колонка примыкала к элементу №2.
3) Как сделать так, чтобы количество колонок такого формата (у них нужное выравнивание - по левой стороне) высчитывалось браузером автоматически исходя из ширины экрана?
Без использования max-height
, потому что количество элементов и их размер будут меняться. Из-за этого использование двух контейнеров для колонок тоже не подходит.
body {
display: inline-block;
border: 1px solid red;
column-count: 2
}
.item {
border: 1px solid #000
}
<div class="item" style="height:100px;width:80px">1</div>
<div class="item" style="height:80px;width:100px">2</div>
<div class="item" style="height:60px;width:60px">3</div>
<div class="item" style="height:100px;width:100px">4</div>
<div class="item" style="height:120px;width:120px">5</div>
body
, так как количество и размер элементов может меняться.