JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
				<div class="wrap"><div class="lol"></div></div>
				<div class="wrap"><div class="lol"></div></div>
				<div class="wrap"><div class="lol"></div></div>
				<div class="wrap"><div class="lol"></div></div>
				<div class="wrap"><div class="lol"></div></div>
				<div class="wrap"><div class="lol"></div></div>
				<div class="wrap"><div class="lol"></div></div>
				<div class="wrap"><div class="lol"></div></div>
				<div class="wrap"><div class="lol"></div></div>
				<div class="wrap"><div class="lol"></div></div>				
			</div>

CSS

.gallery{
padding:3%;
box-sizing:border-box;
overflow:hidden;
text-align:justify;
line-height:0;
font-size:0;
/*position:absolute;
bottom:0;
left:0;
right:0;*/
margin:0 auto;
border:1px solid red;
height:50%
}
.lol{
    padding-bottom:100%;
}
.wrap{
width:9%;
display:inline-block;
vertical-align:top;
position:relative;
overflow:hidden;
background-color:red;
}
.gallery:after{
content: "";
width:100%;
display:inline-block;
}