JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
</div>

CSS

.container {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 2000px;
}

.tiles {
  border: 1px solid black;
  margin: 0 15px 30px 15px;
  /* flex-grow: 1; */
  flex: 0 0 220px;
  padding: 0;
  height: 220px;
  /* min-width: 220px; */
}

/* 

@media screen and (max-width: 1140px) {
  .container { 
    max-width: 850px;
  }
}

@media screen and (max-width: 2040px) {
  .container { 
    max-width: 1750px;
  }
}

@media screen and (max-width: 1790px) {
  .container {
    max-width: 1500px;
  }
}

@media screen and (max-width: 1540px) {
  .container {
    max-width: 1250px;
  }
}

@media screen and (max-width: 1290px) {
  .container {
    max-width: 1000px;
  }
}

@media screen and (max-width: 1040px) {
  .container {
    max-width: 750px;
  }
}

@media screen and (max-width: 790px) {
  .container {
    max-width: 500px;
  }
}

*/