JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">11</div>
  <div class="child">12</div>
  <div class="child">13</div>
  <div class="child">14</div>
  <div class="child">15</div>
  <div class="child">16</div>
  <div class="child">17</div>
  <div class="child">18</div>
</div>

CSS

body {
  position: relative;
  margin: 0;
  min-width: 100vw;
  overflow-x: hidden;
}

.parent {
  padding: 10px 0;
  -webkit-columns: 250px 3;
  -moz-columns: 250px 3;
  columns: 250px 3;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  column-gap: 15px;
  max-width: 80vw;
  margin: 0 auto;
  display: block;
  -moz-column-fill: balance;
  column-fill: balance;
}

.child {
  min-width: calc(100% - 4px);
  margin: 10px;
  background-color: white;
  min-height: 40vh;
  display: inline-block;
  position: relative;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
  padding: 20px;
  box-sizing: border-box;
  border-radius: 3px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}

.child:nth-child(2n) {
  min-height: 30vh;
}

.child:nth-child(4n + 1) {
  min-height: 20vh;
}

.child:nth-child(7n -1) {
  min-height: 30vh;
}