html - 防止内容垂直扩展网格项

Question

我不希望我的网格元素的内容能够展开它。我能够通过设置网格 min-width: 0 来水平防止这种情况。对 min-height: 0 进行了同样的尝试，但它似乎不起作用。

.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>

提前致谢!

Answer 1

删除 .productGallery:before 样式。这就是导致底部出现额外空间的原因。

编辑:如果您希望始终使 gid 成为正方形，请将您的 .productGallery:before 类更新为。请查看this博客供引用。

.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>