How to fit the display grid based on parent div in html css

user_10153626 0
Viewed 706

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 */
}

enter image description here

The display grid will be smaller or fitted on the parent div. but instead, it will be fitted on the parent it overlapped which is wrong. how to fix it? it should be fit on the parent div.

Example: http://jsfiddle.net/tavfbd2o/

css html
1 Answers

Are you going to do like this one?

.parent {
  display: block;
  width: 452px;
  height: 1038px;
  background: red;
}

.content {
  width: 100%;
  height: 100%;
}

.grid {
      height: calc(100% - 35px);
    display: grid;
    margin: auto;
    gap: 1px 1px;
    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 */
}
<div class="parent">
  <div class="content">
     <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>

user_86830860
Related