Две колонки без разделения элемента | убрать расстояние между колонками | количество колонок такое, чтобы экран был заполнен по ширине

Question

Есть вот такой код.
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>

Answer 1

body {
  display: inline-block;
  border: 1px solid red;
  column-count: 2
}

.item {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
  border: 1px solid #000
}

Можно так, но чтобы убрать important нужно вычистить ширину из html

<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>

Answer 2

Вы такое хотите?

.flex__wrapper {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-wrap: wrap;
  max-height: 100vh;
}

.item {
  border: 1px solid #000
}

<div class="flex__wrapper">
  <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>
  <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>
</div>

БЛОГ НА HUSL

Две колонки без разделения элемента | убрать расстояние между колонками | количество колонок такое, чтобы экран был заполнен по ширине

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