我看了看幾個(gè)固有的問題，沒有找到我遇到的問題的解決方案；

最接近的問題是這個(gè)，但它對我不起作用，因?yàn)樗褂帽砀穸皇蔷W(wǎng)格響應(yīng)布局。

我試圖實(shí)現(xiàn)的是一個(gè)網(wǎng)格，其中第一個(gè)單元格有一個(gè)子單元格，應(yīng)該完全覆蓋父單元格的高度和寬度，如圖所示

.InAgent{
    display: grid;
    grid-template-columns: repeat(2fr, 1fr) ;
    grid-template-rows: auto auto;
    word-wrap: break-word;
    place-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1500;
    height: 134vh;
    font-size: 2rem;
    position: relative;
    overflow: hidden;
    min-height: fit-content;
    justify-items: stretch;
}  
    
.pic { 
    grid-area: 1 / 1 / 2 / 2; 
    justify-content: center;
    align-items: center;
    place-items: center;  
    margin: 0 auto;
}

.roles { 
    grid-area: 2 / 1 / 3 / 2; 
    background-color: #913131;
}


.bio { 
    background-color: grey;
    grid-area: 1 / 2 / 3 / 3; 
}

   
.PrJojo{
    width: 50vw;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://i.ibb.co/xf8c0rS/lios-labs-151.jpg');
    background-attachment: local;
    background-position: center;
    background-repeat: no-repeat;
}

<section class="InAgent" id="InJojo">
 
  <div class="pic">
    <div class="PrJojo"></div>
  </div>
  
  <div class="roles">
    <ul>Roles: Board member...
    </ul>
  </div>
  
  <div class="bio"> 
    <ul>Jo is an artist-curator, cultural ecologist and community weaver born in Poland. Dancing through life
    </ul>
  </div>
  
</section>

如果你使用固定的尺寸，如寬度:50vw和高度:3vh，還有高度:134vh你正在以某種方式生成一個(gè)固定的布局。你必須生成一個(gè)真正響應(yīng)的布局，以在每個(gè)屏幕上獲得準(zhǔn)確的顯示，不要使用固定的大小(只有在某些情況下)。

試試這種方法，代碼更少，不那么死板，反應(yīng)更快，更準(zhǔn)確。

編碼快樂！

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  font-size: 2rem;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 1 / 2 / 4 / 3;
}

.div3 {
  grid-area: 2 / 1 / 4 / 2;
}

.bio {
    background-color: grey;
}

.roles {
   background-color: #913131;
}

.picture {
  background-image: url('https://i.ibb.co/xf8c0rS/lios-labs-151.jpg');
  background-attachment: local;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="parent">
  <div class="div1 picture"></div>
  <div class="div2 bio">
    <ul>
      <li>Jo is an artist-curator, cultural ecologist and community weaver born in Poland. Dancing through life</li>
    </ul>
  </div>
  <div class="div3 roles">
    <ul>
      <li>Roles: Board member...</li>
    </ul>
  </div>
</div>