JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
  <div id="grid">
    <div class="tile"><span>test</span></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

CSS

#content {
  display: grid;
  grid-template-rows: 20px auto 20px;
  grid-template-columns: 20px auto 20px;
  height: 100vh;
  background-color: #880022;
}

#content2 {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  height: 100%;
  background-color: #ff00ff;
}

#grid {
  grid-row-start: 2;
  grid-column-start: 2;
  display: grid;
  grid-template-rows: 1fr 1fr;     /* adjustment */
  grid-template-columns: 1fr 1fr;  /* adjustment */
  grid-gap: 2px;
}

.tile {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile span {
  font-size: 2em;
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

body {
  margin: 0;
}