A Pen by Alfredo Llanos.

index.html

<h1>Masonry - Mondrianizr</h1>
<div class="masonry js-masonry">
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item h3"></div>
  <div class="item h2"></div>
  <div class="item w2 h3"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item w3"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h3"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item w3"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h3"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h3"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h3"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item w3"></div>
</div>

Masonry---columnWidth.markdown

Masonry - columnWidth

A Pen by Alfredo Llanos on CodePen.

License.

script.coffee

(($, undefined_) ->
  
  $itms = $('.item')
  $(window).on 'resize', =>
    $selfItms = $itms.fadeOut()
    z = 0
    (displayItems = () ->
      $selfItms.eq(z++).fadeIn(44, displayItems)
    )()

) jQuery

style.less

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

@size: 60px;
@phi: 1.618;

@white: #ECF4E8;
@yellow: #FBDA5B;
@blue: #2B07A8;
@black: #13100A;
@red: #DF3D1B;

body {
  background-color: @black;
  font-family: sans-serif;
  color: @white;
}

.masonry,
h1 {
  max-width: 640px;
  margin: 0 auto;
  .item {
    width: @size;
    height: @size;
    float: left;
    background-color: @yellow;
    margin: 0;
    border: 5px solid @black;
    &:nth-child(3n-1) {
      background-color: @blue;
    }
    &:nth-child(2n-1) {
      background-color: @red;
    }
    &:nth-child(3n+3) {
      background-color: @white;
    }
    &.w2 {
      width:  @size * 2;
    }
    &.w3 {
      width:  @size * 3;
    }
    &.h2 {
      height:  @size * 2;
    }
    &.h3 {
      height:  @size * 3;
    }
  }
}