JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child"></div>
</div>

<hr />

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<hr />

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<hr />

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3 - 10px), 1fr));
  gap: 10px;
}







/* ***************** */

body {
  background: #F4F4F4;
}

.parent + .parent {
  margin-top: 10px;
}

.child {
  min-height: 100px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

hr {
  width: 20px;
  height: 1px;
  border: none;
  background: rgba(200, 0, 0, .2);
  margin: 14px auto;
}