JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<img src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" class="gridimg" /><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="gridimg" /><img src="http://www.britishlegion.org.uk/ImageGen.ashx?width=800&image=/media/2019101/id23055-normandy-66th_-schools-visit-poppy-choice_-pupils-from-london-city-academy.jpg" class="gridimg" /><img src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" class="gridimg" /><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="gridimg" /><img src="http://www.britishlegion.org.uk/ImageGen.ashx?width=800&image=/media/2019101/id23055-normandy-66th_-schools-visit-poppy-choice_-pupils-from-london-city-academy.jpg" class="gridimg" /><img src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" class="gridimg" /><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="gridimg" /><img src="http://www.britishlegion.org.uk/ImageGen.ashx?width=800&image=/media/2019101/id23055-normandy-66th_-schools-visit-poppy-choice_-pupils-from-london-city-academy.jpg" class="gridimg" />
<div class="clear"></div>

CSS

body {
    margin:0;
    padding:0;
    overflow:hidden;
}

.gridimg{
    color:#fff;    
    z-index:2;
	display:block;
	float:left;
    padding:0;
	transition:0.5s;
}

.clear {
    clear:both;
}

JavaScript

$(function(){
    windowSize();
});

$(window).resize(function () {
    windowSize();
});


function windowSize(){
    var w = $(window).width();
    var h = $(window).height();
    
    $('.gridimg').css({
       'width' : w/3,
       'height' : h/3
    });
    
    /*  If w < X do 2 columns & hide one?
        If w < X do 1 column & show 5*/
}