JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="content">
   <div>
     <div style="width: 100%;height: 100%">
       <div class="grid grid-template" style="background:blue;">
         The display grid will be smaller or fitted on the parent div. but instead it will fitted on the parent it overlapped which is wrong. how to fix on it?
       </div>
     </div>
   </div>
  </div>
</div>

CSS

/* don't remove anything here */
.parent {
  display: block;
  width: 452px;
  height: 1038px;
  background: red;
}

.content {
  width: auto;
  display: inline-block;
    transform-origin: 0px 0px 0px;
    transform: matrix(1.51042, 0, 0, 1.51042, 0, 0);
}

.grid {
      height: calc(100% - 35px);
    display: grid;
    gap: 1px 1px;
    background: blue;
    grid-template-columns: 1fr 1fr 1fr; /* don't replace the value */
    grid-template-rows: 1fr 1fr 1fr; /* don't replace the value */
    grid-template-areas:
        "LINE3flr LINE1flr LINE1flr"
        "LINE3flr LINE1flr LINE1flr"
        ". . ."; /* don't replace the value */
}