Автопоток CSS-сетки: плотный не работает

Вы можете думать об этом, как будто мы загружаем несколько изображений (могут быть разных размеров) на Facebook, и они красиво отображают их в своей ленте новостей.

У меня есть контейнер .wrapper, он содержит коробку макета CSS-grid с классом .card-img-grid. Он может иметь максимум 4 изображения, но они будут разных width и height, то есть некоторые будут иметь квадратную форму, некоторые будут длинными в любом направлении (вертикальном или горизонтальном). Полностью зависит от того, как пользователь загрузил.

Моя проблема связана с разницей в размере сетки изображений, создающей белые промежутки, которые разрушают мой полный UX. Пожалуйста, помогите мне, как я могу это исправить или есть другой способ добиться макета типа Facebook для нескольких изображений?

Я хочу, чтобы сетка настраивалась сама по себе в соответствии с изображениями. Также я не могу использовать
grid-column: span 2;grid-row: span 2; как свойства, потому что я не знаю, насколько большие или маленькие изображения. Рабочий код демонстрация

Мой угловой шаблон

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