html - 如何在html css中根据父div来适应显示网格

Question

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

显示网格将更小或适合父 div。但是相反，它将安装在它重叠的父级上，这是错误的。如何解决？它应该适合父 div。
例子:
http://jsfiddle.net/tavfbd2o/

Answer 1

你要这样做吗？

.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>