<h1>1. これを変更する</h1>
<div class="wrap wrap1">
  <div style="height: 20px">1</div>
  <div style="height: 20px">2</div>
  <div style="height: 80px">3</div>
  <div style="height: 70px">4</div>
  <div style="height: 20px">5</div>
</div>

<h1>2. 2カラム</h1>
<div class="wrap wrap2">
  <div style="height: 20px">1</div>
  <div style="height: 20px">2</div>
  <div style="height: 80px">3</div>
  <div style="height: 70px">4</div>
  <div style="height: 20px">5</div>
</div>

<h1>3. 途中で途切れないように調整</h1>
<div class="wrap wrap3">
  <div style="height: 20px">1</div>
  <div style="height: 20px">2</div>
  <div style="height: 80px">3</div>
  <div style="height: 70px">4</div>
  <div style="height: 20px">5</div>
</div>
/* 共通 */
.wrap {
  width: 200px;
  background-color: #ccc;
}

.wrap div {
  margin-bottom: 8px;
}

.wrap div:nth-child(even) {
  background-color: #00a5e7;
}

.wrap div:nth-child(odd) {
  background-color: #00984b;
}

/* 2 */
.wrap2 {
  column-count: 2;
}

/* 3 */
.wrap3 {
  column-count: 2;
}

.wrap3 div {
  page-break-inside: avoid;
  break-inside: avoid;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.