JSFiddle - React, Tailwind, and code Playground

by OzModIaZ

HTML

<div class="gridcontainer">
		<div class="bigimage1"></div>
		<div class="bigimage2"></div>
		<div class="smallimage1"></div>
		<div class="smallimage2"></div>
		<div class="smallimage3"></div>
	</div>

CSS

.gridcontainer{
	background: #666;
	border: .65vw solid #666;
	display: grid;
	height: 81.75vh;
	width: 57.5vw;
	grid-gap: .7vw;
	grid-template-columns: 9vw 9vw 9vw 9vw 9vw 9vw;
	grid-template-rows: 48vh 32.5vh;
	grid-template-areas: 
    "bigimageleft bigimageleft bigimageleft bigimageright bigimageright bigimageright"
    "smallimageleft smallimageleft smallimagecenter smallimagecenter smallimageright smallimageright";
	}

.bigimage1{
	grid-area: bigimageleft;
	background: white;
	}
.bigimage2{
	grid-area: bigimageright;
	background: white;
	}
.smallimage1{
	grid-area: smallimageleft;
	background: white;
}
.smallimage2{
	grid-area: smallimagecenter;
	background: white;
}
.smallimage3{
	grid-area: smallimageright;
	background: white;
	}