JSFiddle - React, Tailwind, and code Playground

HTML

<div data-columns="2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="3">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

[data-columns] {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  margin: 0 0 1rem 0;
  grid-template-columns: repeat(attr(data-columns number), 1fr);
}

[data-columns] > div {
  height: 100px;
  background: white;
}

[data-columns="2"] {
  background: #64B5F6;
}

[data-columns="3"] {
  background: #9CCC65;
}

[data-columns="4"] {
  background: #FFB74D;
}

body {
  margin: 1rem;
}