I'm trying to make a simple grid.
I've successfully made one in pure CSS and now I want to apply that to my njs code.
I know there are a lot of styling elements for grids and a-like but there is no explicit "Grid" element available within Next.JS as far as I see.
Is it possible to make this in NJS but with all njs styling so it would look exactly like in the image?
I know I can use grid grid-cols-4 gap-2 p-2 to get some elements right but what about grid-template-ares and exact measurement of columns?

<style>
main {
  display: grid;
  gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}
.container {
  grid-template-areas:
    "a a b b"
    "c d d e"
    "c d d f"
    "c d d g";
  grid-template-columns: 1fr 2fr 2fr 1fr;
}

.container > div {
  border: 2px solid black;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 100, 100, 0.8);
}

.container > div:nth-child(1) {
  grid-area: a;
}
.container > div:nth-child(2) {
  grid-area: b;
}
.container > div:nth-child(3) {
  grid-area: c;
}
.container > div:nth-child(4) {
  grid-area: d;
}
.container > div:nth-child(5) {
  grid-area: e;
}
.container > div:nth-child(6) {
  grid-area: f;
}
.container > div:nth-child(7) {
  grid-area: g;
}
.container > div:nth-child(8) {
  grid-area: h;
}
</style>

<main class="container">
  <div class="elem">a</div>
  <div class="elem">b</div>
  <div class="elem">c</div>
  <div class="elem">d</div>
  <div class="elem">e</div>
  <div class="elem">f</div>
  <div class="elem">g</div>
</main>