JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
				<div class="wrap"></div>
				<div class="wrap"></div>
				<div class="wrap"></div>
				<div class="wrap"></div>
				<div class="wrap"></div>
				<div class="wrap"></div>
				<div class="wrap"></div>
				<div class="wrap"></div>
				<div class="wrap"></div>
				<div class="wrap"></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%
}

.wrap{
height:50px;
width:9%;
display:inline-block;
vertical-align:top;
position:relative;
overflow:hidden;
background-color:red;
}

.gallery:after{
content: "";
width:100%;
display:inline-block;
}