<button>Shuffle Grid</button>
<article>
  <div class="a">
    <div><svg width="640px" viewBox="0 0 1 1"></svg></div>
  </div>
  <div class="b">
    <div><svg width="640px" viewBox="0 0 2 1"></svg></div>
    <div><svg width="640px" viewBox="0 0 2 1"></svg></div>
  </div>
  <div class="c">
    <div><svg width="320px" viewBox="0 0 1 2"></svg></div>
    <div><svg width="320px" viewBox="0 0 1 2"></svg></div>
  </div>
  <div class="d">
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
  </div>
  <div class="e">
    <div>
      <div><svg width="640px" viewBox="0 0 2 1"></svg></div>
    </div>
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
  </div>
  <div class="f">
    <div>
      <div><svg width="320px" viewBox="0 0 1 2"></svg></div>
    </div>
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
  </div>
  <div class="g">
    <div>
      <div><svg width="640px" viewBox="0 0 2 1"></svg></div>
    </div>
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
  </div>
  <div class="h">
    <div>
      <div><svg width="320px" viewBox="0 0 1 2"></svg></div>
    </div>
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
  </div>
</article>

<section>
  <div>
    <h1>Block Variants</h1>
    <p>Below is a list of blocks that can be used to make up a grid such as the one demonstrated above. You can use any amount of blocks in any order. The grid will work at any resolution and screen size.</p>
  </div>
</section>

<section>
  <div class="a">
    <div><svg width="640px" viewBox="0 0 1 1"></svg></div>
  </div>
</section>
<section>
  <div class="b">
    <div><svg width="640px" viewBox="0 0 2 1"></svg></div>
    <div><svg width="640px" viewBox="0 0 2 1"></svg></div>
  </div>
</section>
<section>
  <div class="c">
    <div><svg width="320px" viewBox="0 0 1 2"></svg></div>
    <div><svg width="320px" viewBox="0 0 1 2"></svg></div>
  </div>
</section>
<section>
  <div class="d">
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
  </div>
</section>
<section>
  <div class="e">
    <div>
      <div><svg width="640px" viewBox="0 0 2 1"></svg></div>
    </div>
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
  </div>
</section>
<section>
  <div class="f">
    <div>
      <div><svg width="320px" viewBox="0 0 1 2"></svg></div>
    </div>
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
  </div>
</section>
<section>
  <div class="g">
    <div>
      <div><svg width="640px" viewBox="0 0 2 1"></svg></div>
    </div>
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
  </div>
</section>
<section>
  <div class="h">
    <div>
      <div><svg width="320px" viewBox="0 0 1 2"></svg></div>
    </div>
    <div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
      <div><svg width="320px" viewBox="0 0 1 1"></svg></div>
    </div>
  </div>
</section>

<!-- 

!! Old way of doing things with img tags in place of svg

<section>
  <div>
    <h1>Block Varients</h1>
    <p>Below is a list of blocks that can be used to make up a grid such as the one demonstrated above. You can use any amount of blocks in any order. The grid will work at any resolution and screen size.</p>
  </div>
</section>

<section>
  <div class="a">
    <div><img src="http://placehold.it/640x640" alt="" /></div>
  </div>
</section>
<section>
  <div class="b">
    <div><img src="http://placehold.it/640x320" alt="" /></div>
    <div><img src="http://placehold.it/640x320" alt="" /></div>
  </div>
</section>
<section>
  <div class="c">
    <div><img src="http://placehold.it/320x640" alt="" /></div>
    <div><img src="http://placehold.it/320x640" alt="" /></div>
  </div>
</section>
<section>
  <div class="d">
    <div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
    </div>
    <div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
    </div>
  </div>
</section>
<section>
  <div class="e">
    <div>
      <div><img src="http://placehold.it/640x320" alt="" /></div>
    </div>
    <div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
    </div>
  </div>
</section>
<section>
  <div class="f">
    <div>
      <div><img src="http://placehold.it/320x640" alt="" /></div>
    </div>
    <div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
    </div>
  </div>
</section>
<section>
  <div class="g">
    <div>
      <div><img src="http://placehold.it/640x320" alt="" /></div>
    </div>
    <div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
    </div>
  </div>
</section>
<section>
  <div class="h">
    <div>
      <div><img src="http://placehold.it/320x640" alt="" /></div>
    </div>
    <div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
      <div><img src="http://placehold.it/320x320" alt="" /></div>
    </div>
  </div>
</section> -->
// Flexbox Masonry Grid Styles

article {
  display: flex;
  flex-flow: row wrap;
  padding: 1rem;
  > * {
    flex: 1 1 320px;
  }
}

svg {
  display: block;
  max-width: 100%;
  preserveAspectRatio: none;
}

.a,.b,.c,.d,.e,.f,.g,.h {
  display: flex;
}

.b {
  flex-direction: column;
}
.e {
  flex-direction: column;
  >:nth-child(2) {
    display: flex;
    flex-direction: row;
  }
}
.g {
  @extend .e;
  flex-direction: column-reverse;
}
.h {
  flex-direction: row-reverse;
}

// Demo Styles

* {
  box-sizing: border-box;
}

button {
  width: calc(100% - 2rem);
  margin: 1rem 1rem 0;
  padding: 2rem;
  font-size: 1rem;
  background: #fff;
  border: 0;
  outline: 0;
  cursor: pointer;
  border: 1px solid #b6b6b6;
  border-radius: 3px;
  color: #9f9f9f;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  
  &:hover {
    color: #404040;
  }
}

section {
  @extend [col],[mb],[pl],[pr];
  &:first-of-type {
    @extend [vh];
  }
  > * {
    margin: auto;
  }
}

h1 {
  font-size: 2rem;
  font-family: helvetica;
  font-weight: bold;
}

p {
  max-width: 70ex;
  padding: 2rem;
  line-height: 150%;
}

h1,p {
  width: 100%;
  text-align: center;
}
View Compiled
// JS only required to shuffle blocks and colour in svgs

var shuffle = function () {
  var parent = document.getElementsByTagName("article")[0];
  var divs = parent.children;
  var frag = document.createDocumentFragment();
  while (divs.length) {
    frag.appendChild(divs[Math.floor(Math.random() * divs.length)]);
  }
  parent.appendChild(frag);
}

var shuffleButton = document.getElementsByTagName('button')[0];
shuffleButton.addEventListener('click', shuffle);


// Random Nice Colour Generator

var config = {
  maxHue: 360,
  minSat: 50,
  maxSat: 85,
  minLight: 50,
  maxLight: 85,
  scaleLight: 15
};

var randomNum = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

var Color = function(hue, sat, light) {
  this.hue = hue || randomNum(0, config.maxHue);

  // Remove ugly magenta hues
  if (this.hue > 288 && this.hue < 310) {
    this.hue = randomNum(310, 360);
  } else if (this.hue > 280 && this.hue < 288) {
    this.hue = randomNum(260, 280);
  }

  // Increase ranges for reds
  if (this.hue > 0 && this.hue < 90) {
    config.minSat = 75,
    config.minLight = 70,
    config.maxSat = 100,
    config.maxLight = 80
  }

  this.sat = sat || randomNum(config.minSat, config.maxSat);
  this.light = light || randomNum(config.minLight, config.maxLight);
};

Color.prototype.hsl = function() {
  return 'hsl(' + this.hue + ', ' + this.sat + '%, ' + this.light + '%)';
};

Color.prototype.rgb = function() {
  var rgb = hsl2rgb(this.hue, this.sat, this.light);
  return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
};

Color.prototype.hex = function() {
  var rgb = hsl2rgb(this.hue, this.sat, this.light);
  var hex = rgbToHex([rgb.r, rgb.g, rgb.b]);
  return hex;
};

function hsl2rgb(h, s, l) {
  var m1, m2, hue;
  var r, g, b
  s /= 100;
  l /= 100;
  if (s == 0)
    r = g = b = (l * 255);
  else {
    if (l <= 0.5)
      m2 = l * (s + 1);
    else
      m2 = l + s - l * s;
    m1 = l * 2 - m2;
    hue = h / 360;
    r = Math.round(HueToRgb(m1, m2, hue + 1 / 3));
    g = Math.round(HueToRgb(m1, m2, hue));
    b = Math.round(HueToRgb(m1, m2, hue - 1 / 3));
  }
  return {
    r: r,
    g: g,
    b: b
  };
}

function HueToRgb(m1, m2, hue) {
  var v;
  if (hue < 0)
    hue += 1;
  else if (hue > 1)
    hue -= 1;

  if (6 * hue < 1)
    v = m1 + (m2 - m1) * hue * 6;
  else if (2 * hue < 1)
    v = m2;
  else if (3 * hue < 2)
    v = m1 + (m2 - m1) * (2 / 3 - hue) * 6;
  else
    v = m1;

  return 255 * v;
}

var rgbToHex = function(rgb) {
  var hex = [];
  for (var j = 0; j < rgb.length; j++) {
    hex[j] = rgb[j].toString(16);
    if (hex[j].length < 2) {
      hex[j] = '0' + hex[j];
    }
  }
  return '#' + hex.join('');
};

var svgs = document.getElementsByTagName('svg');

console.log(svgs[0]);

var callback = function(svg){
  const c = new Color();
  svg.style.background = c.hex();
}

Array.from(svgs).forEach(callback);


View Compiled

External CSS

  1. https://rawgit.com/lukejacksonn/Protohype/master/index.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.