- var weightedRand = function(spec) { var i, sum=0, r=Math.random(); for(i in spec) { sum += spec[i]; if (r <= sum) return i;}}
- var n = 0;
div(class="grid")
	while n < 40
		- var span = weightedRand({1:0.7, 2:0.2, 3:0.1}); var url = "https://unsplash.it/"+(span*100)*2+"/"+(span*100)*2+"/?random&amp;time=" + n++;
		div(style="background-image: url(" + url + ")" class='card span-' + span + ' c-' +  weightedRand({1:0.2, 2:0.2, 3:0.2, 4:0.2, 5:0.2}))
View Compiled 
html { background: black; }
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-gap: 2px;
	grid-auto-rows: min-max(80px, auto);
	grid-auto-flow: dense;
}

.c-1{ background: #1a535c; color: #ddd;}
.c-2{ background: #4ecdc4;}
.c-3{ background: #bfd7ea;}
.c-4{ background: #ff6b6b;}
.c-5{ background: #ffe66d;}

.card { min-height: 100px; background-size: cover; background-position: 50% 50%;}
.span-2 { grid-column-end: span 2; grid-row-end: span 2; min-height: 200px; }
.span-3 { grid-column-end: span 3; grid-row-end: span 3; min-height: 400px; }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.