JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
 <div class="subcontainer">
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
    </div>
</div>

CSS

.block {
 border  : 5px solid DarkRed;
 width   : 150px;
 height  : 150px;
 display : inline-block;
}
.subcontainer {
    text-align:left;
    margin:0 auto;
}
/*Three columns*/
 @media (min-width: 495px){
.subcontainer{width:495px;}
 }
/*Four columns*/
 @media (min-width: 660px){
.subcontainer{width:660px;}
 }
/*Five*/
@media (min-width: 825px){
.subcontainer{width:825px;}
 }