JSFiddle - React, Tailwind, and code Playground

HTML

<div class="q1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

CSS

.q1 div:nth-child(3n){
    margin-right: 0px;
}
.q1 div{
    background: black;
    width: 200px;
    height: 280px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.q1{
    border: 1px red solid;
    max-width:622px; 
    margin: auto;
     display: flex;
    flex-flow: row wrap;
    justify-content:center;
}
@media(max-width:638px){
 .q1 div:nth-child(3n){
    margin-right: 10px;
}   
    .q1 div:nth-child(2n){
    margin-right: 0px;
}   
    .q1{
        max-width: 412px;
    }
}

@media(max-width:428px){
 .q1 div:nth-child(1n){
    margin: 0px;
     margin-bottom: 10px;
} 
    .q1{
        max-width: 202px;
    }
}