CODEWITHSUNDEEP
htmlcsscss-grid
Julián Pera
Julián Pera

Reputation: 107

Prevent content expanding grid item vertically

I don't want the content of my grid items been able to expand it. I was able to prevent this horizontally by setting the grid min-width: 0. Tried the same with min-height: 0 but it doesn't seem to work.

.productGallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 10px;
}
.productGallery:before {
  grid-area: 1 / 1 / 1 / 1;
  content: '';
  width: 0;
  padding-bottom: 100%;
}
.featuredImage {
  grid-area: 1 / 1 / 5 / 5;
  background-color: green;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.galleryList {
  grid-area: 1 / 5 / 5 / 5;
  background-color: red;
}
<div class="productGallery">
  <div class="featuredImage">
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
  </div>
  <div class="galleryList">

  </div>
</div>

Thanks in advance!

Upvotes: 0

Views: 370

Answers (1)

Nitheesh
Nitheesh

Reputation: 20016

Remove the .productGallery:before style. This is what causing the extra space at bottom.

Edit: If you are looking to make the gid a square always, update your .productGallery:before class as. Please check this blog for reference.

.productGallery:before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}


.productGallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 10px;
}
.productGallery:before {
    content: '';
    width: 0;
    padding-bottom: 100%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}  
.featuredImage {
  grid-area: 1 / 1 / 5 / 5;
  background-color: green;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.galleryList {
  grid-area: 1 / 5 / 5 / 5;
  background-color: red;
}
<div class="productGallery">
  <div class="featuredImage">
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
  </div>
  <div class="galleryList">

  </div>
</div>

Upvotes: 1

Related Questions