Расположение Box элементов по вертикали (flex?)

Question

Необходимо расположить элементы необычным образом (как показано на рисунке), ширина блоков задана width:50%, пытался сделать через flex, но что-то не как не пойму как это сделать, возможно ли это сделать через css?

<div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

Важно: блоки могут быть различной высоты.

Расположены должны быть так:

Answer 1

Для display: block; и display: inline-block; существует такое правило как column-count.
Но вроде как это колхоз..

.wrapper {
  display: block;
  width: 100%;
  column-gap: 10px;
  column-count: 2;
  margin-bottom: -10px;
}

.wrapper .box {
  display: block;
  width: 100%;
  height: 30vh;
  border: 2px solid black;
  box-sizing: border-box;
  margin-bottom: 10px;
}

<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

Answer 2

Задай wrapper высоту height чтобы помещались 3 блока, затем используй свойство flex-direction: column и flex-wrap: wrap. Если нет, то нужно пробовать другие способы

Answer 3

Обязательно ли каждый 2 блок должен быть чуть больше первого? Работает внезависимости от количества элементов.

.box {
  border: 1px solid Black;  
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

<div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

Answer 4

Не нужен никакой флекс:

.wrapper {
  /* you need this: */
  column-count: 2;
}

.box {
  border: 2px solid gray;
  padding: 1em;
  margin-bottom: 10px;
  
  /* and you need this: */
  break-inside: avoid;
}

<div class="wrapper">
  <div class="box">1<br><br><br></div>
  <div class="box">2<br><br><br><br><br></div>
  <div class="box">3<br><br></div>
  <div class="box">4<br></div>
  <div class="box">5<br><br><br></div>
  <div class="box">6</div>
</div>

БЛОГ НА HUSL

Расположение Box элементов по вертикали (flex?)

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