<ul class="list">
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
  <li>card</li>
</ul>

.list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: center;
  gap: 30px;
  padding: 30px;
  
  > li {
    height: 100px;
    display: grid;
    place-items: center;
    background-color: rgba(#00ff00, 0.2);
  }
}