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样式。这就是造成底部多余空间的原因。

编辑： 如果您希望始终使方框成为正方形，请将.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>

防止内容垂直扩展网格项

1 个答案: