JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
</ul>

CSS

ul {
  border: 2px solid red;
  display: grid;
  grid-gap: 5%;
   grid-template-columns: 1fr 1fr 1fr 1fr;
  list-style-type: none;
  counter-reset:div
}



li:nth-child(4n) ~li {
  margin-top: 5%
}

li {
  background-color: green;
  font-size:0;
  counter-increment:div
  }
  li:before {
    content:'';
  padding-top: 100%;
  width:0;
  }
  li:before , li>div {
  display:inline-block;
  vertical-align:middle;
}
li>div {font-size:5vmax;
width:100%;
text-align:center;}
li>div:before {content:counter(div)}