JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="box">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

CSS

.container{      
  background-color:red;
  display:flex;
  justify-content:center;
}

.box{
  width: 600px; /*可以隨意變動*/
  margin: 20px;
  background-color:green;
  padding:20px;
  

  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, auto));
}

.card{
  background-color: yellow;
  color: white;
  height: 4rem;
  width:90px;
  
  margin:auto; 
}

/*此方法的缺陷為，卡片會跟隨螢幕寬度變大而間距變大*/