Vertically Flowing Masonry

JS just to set random heights

by Génesis García Morilla

HTML

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

CSS

body {
  column-gap: 10px;
  background-color: antiquewhite;
}

@media only screen and (min-width: 700px) {
  body {
     column-count: 2;
  }
}

@media only screen and (min-width: 900px) {
  body {
     column-count: 3;
  }
}

div {
  display: inline-block;
  width: 100%;
  margin: 0 0 10px;
  color: #2D333B;
  font-size: xx-large;
  text-align: center;
  background-color: #50514F;
}

div:nth-of-type(2) {
  background-color: #F25F5C;
}

div:nth-of-type(3) {
  background-color: #FFE066;
}

div:nth-of-type(4) {
  background-color: #247BA0;
}

div:nth-of-type(5) {
  background-color: #70C1B3;
}

JavaScript

document.querySelectorAll('div').forEach($div => 
$div.style.height = `${Math.floor(Math.random() * 300) + 50}px`)