JSFiddle - React, Tailwind, and code Playground

by Kevin Van Lierde

HTML

<div class="grid">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

CSS

* {
        margin: 0;
        padding: 0;
    }
    .grid {
        min-width: 330px;
        overflow: auto; /* clears floats */        
        padding: 0 5%;
    }
    .grid > div {
        width: 100px;
        height: 61px;
        margin: 5px;
        background-color: teal;
        float: left;
        position: relative;
        overflow: visible;
    }

JavaScript

window.addEventListener('resize', onResizeAdjust, false);
onResizeAdjust();

function onResizeAdjust() {
   var grid = document.getElementsByClassName('grid')[0],
       unitWidth = 110,
       times = grid.clientWidth/unitWidth,
       parent = document.body;
   if(parseInt(times) !== times) {
       grid.style.padding = '0 ' + ((parent.clientWidth - parseInt(times)*unitWidth)/2) + 'px';
   }
}