<div class="items px">
  <div class="item">px</div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="items em">
  <div class="item">em</div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="items rem">
  <div class="item">rem</div>
  <div class="item"></div>
  <div class="item"></div>
</div>

div {
  padding: 1rem;
  margin-block: 0.5rem;
  background-color: grey;
}

.item {
  background: skyblue;
}

@media (min-width: 640px) {
  .px {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vmax;
    background-color: hotpink;
  }
}
@media (min-width: 40em) {
  .em {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vmax;
    background-color: hotpink;
  }
}
@media (min-width: 40rem) {
  .rem {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vmax;
    background-color: hotpink;
  }
}