网格项目在网格外部溢出

Question

我有一个CSS网格，其中最后一行元素从网格中溢出，而不是扩展网格以容纳该元素。我希望它不会像我在下面链接的网站中那样溢出。

https://egorchern.github.io/My_WebDev_Portfolio/Projects.html

#expandedPrj {
  margin-bottom: 100px;
  font-size: calc(11.5px + 0.25vw);
  padding: 32px;
}

#detailedPrjGrid {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  border: 2px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.45rem;
}

#detailedPrjGrid {
  display: grid;
  grid-template-rows: 15% 15% 15% 15% 40%;
  grid-template-columns: 40% auto;
  padding: 30px;
  grid-column-gap: 10px;
  grid-row-gap: 20px;
}

.detailedPrjGrid-item {
  padding: 5px;
  background-color: green;
  overflow-wrap: break-word;
}

#prjPic {
  grid-row-start: 1;
  grid-row-end: 5;
}

#descr {
  grid-column-start: 1;
  grid-column-end: 3;
}
<div class="row" id="expandedPrj">
  <div class="col-1"></div>
  <div class="col-10" id="detailedPrjGrid">
    <div class="detailedPrjGrid-item" id="prjPic">
      <p> k</p>
    </div>
    <div class="detailedPrjGrid-item">
      а
    </div>
    <div class="detailedPrjGrid-item">
      а
    </div>
    <div class="detailedPrjGrid-item">
      а
    </div>
    <div class="detailedPrjGrid-item">
      а
    </div>
    <div class="detailedPrjGrid-item" id="descr">
      <p>sfgafjsfhas ssknfskf s lsdjgsljgklasdjgkl;asdfkl;sad jskdlgklsdgklsa jsdkljglks kjlg njsdnmg lksad fnmsldaks djnksdlkjsd gnlsdan dsln lsj gslk glks gl;sl sk gkjsd gklsgslglsjg sdlsalkg lsaglksjlf slj ls glks lksgkasjglksa glshg slaká fpfjasj klss
        djglsjfglks ljslagj lksaj jsdfklsaj klsjgs lkjlskd lksdjfkl sjklj slkn glsdn lksdnf lksnfkl sdnfl kslfk snlkfsdlksdlkslk slkslkd klgklsn glka</p>
    </div>
  </div>
  <div class="col-1"></div>
</div>

我有一个CSS网格，其中最后一行元素从网格中溢出，而不是扩展网格以容纳该元素。我希望它不会像我链接的网站那样溢出...

Answer 1

您使用百分比定义了网格行，总计为100%。对此增加缝隙肯定会导致溢出，因为您将有超过100%