Удалить расстояние между колоннами

Question

Как убрать расстояние между этими столбцами? То есть, заставить второй столбец примыкать к элементу №2.

Без использования двух контейнеров для двух столбцов (потому что количество и размер элементов будут меняться, но они должны быть максимально похожими по высоте). Таким образом, max-height из body также не подходит.

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

.item {
  border: 1px solid #000;
  break-inside: avoid;
}

<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

Добавление column-rule: 0 и column-gap: 0 поможет, но все равно будет немного странно с шириной окружающего контейнера inline-block.

Flexbox был бы идеальным способом для go с направление сгибания столбца примерно так:

body {
    display: flex;
    flex-direction: column;
    border: 1px solid red;
    max-width: 331px;
    flex-wrap: wrap;
    max-height: 320px;
    justify-content: flex-start;
    align-content: flex-start;
}

.item {
    border: 1px solid #000;
    break-inside: avoid;
    flex-basis: 100px;
}

<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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    body {
 
      border: 1px solid red;
    }

    .item {
      border: 1px solid #000;
    }
 
    .wrappper {
    display:flex;
   }

<div class='wrappper'>
<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>
<div>
    <div class="item" style="height:100px;width:100px">4</div>
    <div class="item" style="height:120px;width:120px">5</div>
</div>
</div>