body {

  margin: 0;

  padding: 1rem;

}

.masonry-with-columns {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

  -ms-flex-direction: column;

  flex-direction: column;

  -webkit-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  max-height: 1000px; }

  .masonry-with-columns div {

    -webkit-box-flex: 1;

    -webkit-flex: 1 0 auto;

    -ms-flex: 1 0 auto;

    flex: 1 0 auto;

    background: #00997B;

    color: white;

    margin: 0 1rem 1rem 0;

    text-align: center;

    font-weight: 900;

    font-size: 2rem; }

  .masonry-with-columns div:nth-child(1) {

    height: 163px;

    line-height: 163px; }

  .masonry-with-columns div:nth-child(2) {

    height: 495px;

    line-height: 495px; }

  .masonry-with-columns div:nth-child(3) {

    height: 120px;

    line-height: 120px; }

  .masonry-with-columns div:nth-child(4) {

    height: 309px;

    line-height: 309px; }

  .masonry-with-columns div:nth-child(5) {

    height: 317px;

    line-height: 317px; }

  .masonry-with-columns div:nth-child(6) {

    height: 277px;

    line-height: 277px; }

  .masonry-with-columns div:nth-child(7) {

    height: 339px;

    line-height: 339px; }

  .masonry-with-columns div:nth-child(8) {

    height: 491px;

    line-height: 491px; }

  .masonry-with-columns div:nth-child(9) {

    height: 281px;

    line-height: 281px; }

  .masonry-with-columns div:nth-child(10) {

    height: 499px;

    line-height: 499px; }

  .masonry-with-columns div:nth-child(11) {

    height: 490px;

    line-height: 490px; }

  .masonry-with-columns div:nth-child(12) {

    height: 289px;

    line-height: 289px; }

  .masonry-with-columns div:nth-child(13) {

    height: 356px;

    line-height: 356px; }

  .masonry-with-columns div:nth-child(14) {

    height: 406px;

    line-height: 406px; }

  .masonry-with-columns div:nth-child(15) {

    height: 196px;

    line-height: 196px; }

  .masonry-with-columns div:nth-child(16) {

    height: 237px;

    line-height: 237px; }

  .masonry-with-columns div:nth-child(17) {

    height: 367px;

    line-height: 367px; }

  .masonry-with-columns div:nth-child(18) {

    height: 472px;

    line-height: 472px; }

  .masonry-with-columns div:nth-child(19) {

    height: 413px;

    line-height: 413px; }

  .masonry-with-columns div:nth-child(20) {

    height: 337px;

    line-height: 337px; }

  .masonry-with-columns div:nth-child(21) {

    height: 406px;

    line-height: 406px; }

  .masonry-with-columns div:nth-child(22) {

    height: 368px;

    line-height: 368px; }

  .masonry-with-columns div:nth-child(23) {

    height: 130px;

    line-height: 130px; }

  .masonry-with-columns div:nth-child(24) {

    height: 209px;

    line-height: 209px; }

  .masonry-with-columns div:nth-child(25) {

    height: 203px;

    line-height: 203px; }

  .masonry-with-columns div:nth-child(26) {

    height: 368px;

    line-height: 368px; }

  .masonry-with-columns div:nth-child(27) {

    height: 163px;

    line-height: 163px; }

  .masonry-with-columns div:nth-child(28) {

    height: 418px;

    line-height: 418px; }

  .masonry-with-columns div:nth-child(29) {

    height: 123px;

    line-height: 123px; }

  .masonry-with-columns div:nth-child(30) {

    height: 256px;

    line-height: 256px; }

  .masonry-with-columns div:nth-child(31) {

    height: 196px;

    line-height: 196px; }

  .masonry-with-columns div:nth-child(32) {

    height: 224px;

    line-height: 224px; }

  .masonry-with-columns div:nth-child(33) {

    height: 122px;

    line-height: 122px; }

  .masonry-with-columns div:nth-child(34) {

    height: 303px;

    line-height: 303px; }

  .masonry-with-columns div:nth-child(35) {

    height: 159px;

    line-height: 159px; }

  .masonry-with-columns div:nth-child(36) {

    height: 320px;

    line-height: 320px; }

const numCols = 3;

const colHeights = Array(numCols).fill(0);

const container = document.getElementById('masonry-with-columns');

Array.from(container.children).forEach((child, i) => {

  const order = i % numCols;

  child.style.order = order;

  colHeights[order] += parseFloat(child.clientHeight);

})

container.style.height = Math.max(...colHeights) + 'px';