CODEWITHSUNDEEP
htmlcsscss-grid
Egor Chernyshev
Egor Chernyshev

Reputation: 7

grid item overflowing outside of the grid

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>

Upvotes: 0

Views: 1732

Answers (3)

Logan Sotelo
Logan Sotelo

Reputation: 32

Try using the fr units which take up a fraction of the free space. Here's is how I would change your code to make it work:

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

Upvotes: 0

Bruno DaSilva
Bruno DaSilva

Reputation: 21

A simple way for you to fix it is to set a min-height to your #detailedPrjGrid and adjust the percentage of your last item in your grid-template-rows for something like 35%. Since in this case, box-sizing: border-box; it will not work.

display: grid;
grid-template-rows: 15% 15% 15% 15% 35%;
grid-template-columns: 40% auto;
padding: 30px;
grid-column-gap: 10px;
grid-row-gap: 10px;
min-height: 50vh;

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272734

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>

Upvotes: 1

Related Questions