JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class='cards-list'>
  <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 class='card'></div>
  <div class='card'></div>
  <div class='card--filler'></div>
  <div class='card--filler'></div>
  <div class='card--filler'></div>
  <div class='card--filler'></div>
</div>

<div class='grid'>
  <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 class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
</div>

CSS

.cards-list {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  max-width: 40rem;
  margin-bottom: 4rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  max-width: 40rem;
}

.card {
  width: 120px;
  height: 180px;
  background-color: red;
  margin-bottom: 10px;
}

.card--filler {
  width: 120px;
  height: 0;
}