JSFiddle - React, Tailwind, and code Playground
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>
<p></p>
CSS
* {
margin: 0;
padding: 0;
}
.grid {
display: table;
outline: 1px solid blue;
margin: 0 auto;
}
.grid > div {
width: 100px;
height: 61px;
margin: 5px;
background-color: teal;
float: left;
}
JavaScript
$(document).ready(function(evt) {
var prevBlocks,
adjustGrid = function(evt) {
var blockWidth = $(".grid > div").eq(0).outerWidth(true),
winWidth = $(window).eq(0).outerWidth(true),
numBlocks = parseInt(winWidth / blockWidth);
if(numBlocks !== prevBlocks) {
$(".grid > div")
.css("clear", "none")
.filter(function(index) {
if(index % numBlocks === 0) {
return this;
}
})
.css("clear", "left");
prevBlocks = numBlocks;
}
};
adjustGrid();
$(window).resize(adjustGrid);
});