Masonry implementation in Angular 2+ only with JS and CSS, ordered horizontaly

content.component.css

.card-img-overlay-gradient {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.flex-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  grid-auto-rows: 20px;
}
.flex-item {}

content.component.html

<nav class="navbar fixed-top navbar-dark" *ngIf="this._contentService.getContent(this.id)" [style.background-color]="this._contentService.getColor(this.id)">
  <a (click)="this._location.back()" style="cursor: pointer">
    <span class="navbar-brand mb-0 h1">
      <i class="fa fa-chevron-left" aria-hidden="true" style="color: white; padding-right: 10px;"></i>
      {{ this._contentService.getTitle(this.id) }}
    </span>
  </a>
  <span class="navbar-text" style="color: #fff">
    {{ this._configurationService.getStrings().last_updated }} {{ this._contentService.getTime(this.id) }}
    <i class="fa fa-refresh" style="color: #fff; padding-left: 5px;" aria-hidden="true" (click)="this._contentService.reload(this.id)"></i>
  </span>
</nav>
<main role="main" class="tentu-content-container" (window:resize)="onResize(event)" *ngIf="this._contentService.getContent(this.id)">
  <div class="flex-container" infinite-scroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="300" (scrolled)="this._contentService.loadOnScroll(this.id)">
    <div class="flex-item animated fadeIn" *ngFor="let element of this._contentService.getContent(this.id).content">
      <a [routerLink]="['/detail', element.id]" style="text-decoration: none;">
        <div [attr.id]="'element' + element.id" class="card bg-dark text-white" (load)="resizeElementById('element')">
          <img class="card-img-top" *ngIf="element.image != ''" src="{{ element.image }}" alt="{{ element.title }}" style="background-color: #fff">
          <div class="card-body">
            <h5 class="card-title">
              {{ element.title }}
            </h5>
            <p class="card-text" [innerHTML]="element.description"></p>
          </div>
          <div class="card-footer">
            <small class="text-muted">
              {{ element.author }}
            </small>
          </div>
        </div>
      </a>
    </div>
  </div>
</main>

content.component.ts

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { ContentService } from '../../_services/content.service';
import { ConfigurationService } from '../../_services/configuration.service';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit, AfterViewChecked  {

  private id: string;

  constructor(private _location: Location,
              private _activatedRoute: ActivatedRoute,
              private _contentService: ContentService,
              private _configurationService: ConfigurationService) { }

  ngOnInit() {
    this._activatedRoute.params.subscribe(params => {
      this.id = params['type'] + params['id'];
      this._contentService.init(params['type'], params['id']);
    });
  }

  ngAfterViewChecked() {
    this.resizeAllGridItems();
  }

  onResize(event) {
    this.resizeAllGridItems();
  }

  resizeGridItem(item) {
    var grid = document.getElementsByClassName("flex-container")[0];
    var rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
    var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
    var rowSpan = Math.ceil((item.querySelector('.card').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
    item.style.gridRowEnd = "span "+ rowSpan;
  }

  resizeAllGridItems() {
    var allItems = document.getElementsByClassName("flex-item");
    for (var x = 0; x < allItems.length; x++) {
      this.resizeGridItem(allItems[x]);
    }
  }

}