A Pen by Stephan Pohl.

index.html

<ul class="shopping-world--container">
  <div class="grid--sizer"></div>
  <div class="gutter--sizer"></div>
  <li class="shopping-world--entry w2"></li>
  <li class="shopping-world--entry"></li>
  <li class="shopping-world--entry"></li>
  <li class="shopping-world--entry"></li>
  <li class="shopping-world--entry"></li>
  <li class="shopping-world--entry"></li>
  <li class="shopping-world--entry"></li>
  <li class="shopping-world--entry"></li>
  <li class="shopping-world--entry"></li>
  <li class="shopping-world--entry"></li>
  <li class="shopping-world--entry"></li>
</ul>

njDEK.markdown

njDEK

A Pen by Stephan Pohl on CodePen.

License.

script.js

$( function() {
  
  $('.shopping-world--container').isotope({
    itemSelector: '.shopping-world--entry',
    masonry: {
      gutter: '.gutter--sizer',
      columnWidth: '.grid--sizer'
    }
  });

});

style.less

@mobileLandscapeViewportWidth: 30em;
@tabletViewportWidth: 48em; // 768px
@tabletLandscapeViewportWidth: 64em; // 1024px
@desktopViewportWidth: 78.75em; // 1260px

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.shopping-world--container {
  list-style: none;
  width: 100%;
  margin: 0; padding: 0;
  display: block;
  overflow: hidden;
}

.grid--sizer {
    width: 99%
  }
.gutter--sizer { width: 1%; }
.shopping-world--entry {
  width: 99%;
  height: 250px;
  background: #f00;
  margin: 0 0 1%; padding: 0;
  
  &:nth-child(2n) {
    background: #0f0
  }
  &:nth-child(3n) {
    background: #00f
  }
}

@media screen and (min-width: @mobileLandscapeViewportWidth) {
  .grid--sizer, .shopping-world--entry {
    width: 49%;
  }
  .w2 {
    width: 99%;
  }
}

@media screen and (min-width: @tabletViewportWidth) {
  .grid--sizer, .shopping-world--entry {
    width: 32.3333%;
  }
  .w2 {
    width: 65.3333%
  }
}

@media screen and (min-width: @tabletLandscapeViewportWidth) {
  .grid--sizer, .shopping-world--entry {
    width: 24%;
  }
  .w2 {
    width: 49%;
  }
}
@media screen and (min-width: @desktopViewportWidth) {
  .grid--sizer, .shopping-world--entry {
    width: 19%;
  }
  .w2 {
    width: 39%
  }
}