JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<h3>Without wrapping!</h3>
<div class="flex-row">
</div>
<h3>With wrapping!</h3>
<div class="flex-row wrap">
</div>

CSS

.flex-row {
  display: flex;
  flex-direction: row;
}
.wrap {
  flex-wrap: wrap;
}

.flex-col {
  display: flex;
  flex: 0 0 25%;
  max-width: 25%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

JavaScript

function rand(min, max) {
	return Math.floor(max - Math.random()*(max-min))
}
var rows = document.getElementsByClassName('flex-row');
for (var r = 0; r < rows.length; r++) {
  for (var i = 0; i < 8; i++) {
  	var wh = rand(5, 150);
    var col = document.createElement('div');
    col.className = 'flex-col';
    var img = document.createElement('img');
    img.src = 'http://lorempixel.com/' + wh + '/' + wh;
    col.appendChild(img);
    rows[r].appendChild(col);
  }
}