Mansory Layout

by Lucas Silva

HTML

<div class="master">
  <div class="child"></div>
  <div id="s" class="child"></div>
  <div id="p" class="child"></div>
  <div id="x" class="child"></div>
  <div id="z" class="child"></div>
  <div class="child"></div>
  <div id="s" class="child"></div>
  <div id="p" class="child"></div>
  <div id="x" class="child"></div>
  <div id="z" class="child"></div>
  <div class="child"></div>
  <div id="s" class="child"></div>
  <div id="p" class="child"></div>
  <div id="x" class="child"></div>
  <div id="z" class="child"></div>
</div>

CSS

.master{
  width: 100%;
  column-count: 4;
}

.child{
  margin-top:12px;
  display:block;
  background: red;
  min-height: 110px;
  width: 100%;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

#p{
  height:160px;
  background:blue;
}

#s{
  height:135px;
  background:black;
}

#x{
  height:170px;
  background:green;
}

#z{
  height:125px
  background:yellow;
}