JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

body {
  background: beige;
}

.container {
  display: flex;
  /* display: grid; */
  gap: 0.2em;
  flex-flow: row wrap;
  flex: auto;
  /* grid-template-columns: repeat(6, min-content); */
  justify-content: center;
  font-family: fantasy;
  font-size: x-large;
}

.container>div {
  width: 100px;
  height: 100px;
  outline: 1px solid #00000050;
  text-align: center;
  line-height: 100px;
}

.container>div:nth-of-type(1) {
  background-color: #ffd900;
}

.container>div:nth-of-type(2) {
  background-color: #d91e10;
}

.container>div:nth-of-type(3) {
  background-color: #f19072;
}

.container>div:nth-of-type(4) {
  background-color: #00000000;
}

.container>div:nth-of-type(5) {
  /* background-color:; */
}

.container>div:nth-of-type(6) {
  /* background-color:; */
}

.container>div:nth-of-type(7) {
  /* background-color:; */
}

.container>div:nth-of-type(8) {
  /* background-color:; */
}

.container>div:nth-of-type(9) {
  /* background-color:; */
}

.container>div:nth-of-type(10) {
  /* background-color:; */
}

.container>div:nth-of-type(11) {
  /* background-color:; */
}

.container>div:nth-of-type(12) {
  /* background-color:; */
}