JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* flex je tu použit pro odstranění mezery mezi divy, případně bez flexu lze nastavit font-size na 0 a v itemech zase nastavit na požadovanou velikost */

.holder {
  width: 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  width: 25%;
  padding-bottom: 25%;
  display: inline-block;
}

.item:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

/* níže jen znázornění barvičkami */

.item:nth-child(5n + 0) {
  background: red;
}

.item:nth-child(5n + 1) {
  background: green;
}

.item:nth-child(5n + 2) {
  background: blue;
}

.item:nth-child(5n + 3) {
  background: yellow;
}

.item:nth-child(5n + 4) {
  background: orange;
}