Masonry example

by Alex Coleman

HTML

<div id="headerwrapper" class="cols">
  <div id="header1" class="box one"></div>
  <div id="header2" class="box two"></div>
  <div id="header3" class="box one"></div>
  <div id="header4" class="box three"></div>
  <div id="header5" class="box four"></div>
  <div id="header6" class="box five"></div>
  <div id="header7" class="box one"></div>
</div>

CSS

#headerwrapper {
  width: 100%;
  max-width: 988px;
  background:#000;
  margin: 2em auto;
  padding:10px 20px;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
}

.box.one {
  height: 200px;
  background-color: #d77575;
}

.box.two {
  height: 300px;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: 400px;
}

.box.four {
  background-color: #3daee3;
  height: 500px;
}

.box.five {
  background-color: #bb8ed8;
  height: 600px;
}