grid item overflowing outside of the grid

Question

I have a css grid where the last row element overflows out of the grid instead of the grid expanding to accommodate that element. I want it to not overflow like it does in the website I've linked below

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>

Answer 1

You defined your grid-row using percentage and the total is 100%. Adding gap to this will make you have an overflow for sure because you will have more than 100%

Use fr instead of %

#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: 15fr 15fr 15fr 15fr 40fr;
  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>