CSS网格自动流：密集不起作用

Question

您可以想到这一点，因为我们在Facebook上上传了多张图片（可能具有不同的尺寸），并在新闻源中很好地显示了它们。

我有一个容器.wrapper，它包含一个CSS-grid类别为.card-img-grid的布局框。它最多可以包含4张图像，但是它们将具有不同的width和height，即有些图像具有正方形，有些图像在任一方向（垂直或水平）上都较长。完全取决于用户的上传方式。

我的问题是由于图像网格大小的差异，造成了白色间隙，这毁了我完整的用户体验。请帮助我，如何解决这个问题，或者还有另一种方法来实现多张图片的 Facebook 类型布局？

我希望网格根据图像自行调整。另外，我不能使用
grid-column: span 2;grid-row: span 2;就像属性一样，因为我不知道图像的大小。有效的代码笔demo

我的角度模板

<div class="card-img-grid">
  // Loop will be displaying only 4 images, but can have different size
  <ng-container *ngFor="let img of feed.images | slice: 0 : 4">
     <div class="img-grid-item">
       <img class="w-100" [src]="img.url"> // .w-100 sets width: 100%
      </div>
   </ng-container>
</div>

CSS代码

.wrapper {
  max-width: 500px;
}

.card-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 4px;
  grid-auto-flow: dense;
  margin: 14px 0 5px;
}
.card-img-grid .img-grid-item {
  overflow: hidden;
  cursor: pointer;
}

Answer 1

相当简单的CSS可以根据您的要求完成此操作。

#container {
   column-count:4;
   column-gap: 0;  

   .img-card {
     width:100%;
   }
}

示例： https://stackblitz.com/edit/responsive-image-cols