Ngx-masonry не работает должным образом в Angular. Получение изображений сгруппированных и перекрывающихся ⇐ CSS

[Anonymous]

Мне нужно создать этот конкретный макет в Angular 9.


Я использую пакет ngx-masonry. (https://www.npmjs.com/package/ngx-masonry), чтобы создать эту конкретную сетку.
Мой код выглядит следующим образом:
Для компонента html

Код: Выделить всё

[img]{{ item.src }}[/img]

Для компонента ts

Код: Выделить всё

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-inspirations',
templateUrl: './inspirations.component.html',
styleUrls: ['./inspirations.component.css']
})
export class InspirationsComponent implements OnInit {
masonryItems = [
{src: "../../assets/component_7_images/image1.png"},
{src: "../../assets/component_7_images/image2.png"},
{src: "../../assets/component_7_images/image3.png"},
{src: "../../assets/component_7_images/image4.png"},
{src: "../../assets/component_7_images/image5.png"},
{src: "../../assets/component_7_images/image6.png"},
{src: "../../assets/component_7_images/image7.png"}
];

constructor() { }

ngOnInit(): void {
}

}

Результат, который я получаю:


Мне нужны изображения в правильном формате каменной кладки. Может кто подскажет?

Подробнее здесь: https://stackoverflow.com/questions/659 ... and-overla