CSS-grid自动流：密集不起作用[重复]答案

【问题标题】：CSS-grid auto-flow: dense not working [duplicate]CSS-grid自动流：密集不起作用[重复]
【发布时间】：2019-01-23 16:56:22
【问题描述】：

您可以这样想，因为我们在 Facebook 上上传了多张图片（可能是不同尺寸的），它们在他们的新闻源中很好地展示了这些图片。

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

我的问题是由于图像网格大小的不同，造成了白色间隙，这破坏了我的完整用户体验。请帮助我，我该如何解决这个问题，或者还有其他方法可以实现多张图片的 Facebook 类型布局？

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

我的 Angular 模板

<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;
}

【问题讨论】：

猜猜fr导致了一些问题
@Developer 建议好吗？
我也在尝试，你能用flex方法吗？
是的，没问题...您可以尝试在代码笔中执行此操作并保存或发布您的工作答案吗？
并非没有，但我认为 FB 会保持比例，然后裁剪预览。所以基本上你永远不会得到一个矩形来整齐地放在一个全是正方形的网格中，反之亦然，你永远不会让一个正方形整齐地放在一个矩形网格中。我至少会考虑这可能不是布局问题，而是图像预览问题。

标签： html css angular sass css-grid

【解决方案1】：

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

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

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

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

【讨论】：

使用你的方法，图像可以正常传送，但仍然不是我想要的......无论如何，谢谢