Kikko's grid

by Josh Krauth-Harding

HTML

<div class="container cf">
  <div class="thumbnail">A</div>
  <div class="thumbnail">B</div>
  <div class="thumbnail">C</div>
  <div class="thumbnail">D</div>
  <div class="thumbnail">A</div>
  <div class="thumbnail">B</div>
  <div class="thumbnail">C</div>
  <div class="thumbnail">D</div>
  <div class="thumbnail">A</div>
  <div class="thumbnail">B</div>
  <div class="thumbnail">C</div>
  <div class="thumbnail">D</div>
  <div class="thumbnail">A</div>
  <div class="thumbnail">B</div>
  <div class="thumbnail">C</div>
  <div class="thumbnail">D</div>
</div>

SCSS

.container {
  width: 100%;
}

.thumbnail {
  height: 200px;
  float: right;
  &:nth-child(8n+1),
  &:nth-child(8n+2),
  &:nth-child(8n+3),
  &:nth-child(8n+4) {
    float: left;
  }
  &:nth-child(4n+1) {
    width: 50%;
    background: red;
    height: 400px;
  }
  &:nth-child(4n+2) {
    width: 50%;
    background: blue;
  }
  &:nth-child(4n+3) {
    width: 25%;
    background: green;
  }
  &:nth-child(4n+4) {
    width: 25%;
    background: orange;
  }
}


/* DON'T DELETE THIS */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: helvetica, arial, sans-serif;
}


/* Clear Float */

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

JavaScript

var s1 = $(".thumbnail:nth-child(4n+1)"),
  s2 = $(".thumbnail:nth-child(4n+2)"),
  s3 = $(".thumbnail:nth-child(4n+3), .thumbnail:nth-child(4n+4)");

var layout = function() {
  var w = $(window).width(),
			p = w * .95;

  s1.height(p/2).html("W = " + w/2 + "<br/> H = " + (p/2).toFixed(2));
  $(s2).add(s3).height((p/2)/2).html("W = " + w/4 + "<br/> H = " + ((p/2)/2).toFixed(2));

}

layout();

$(window).resize(function() {
  layout();
})