Working on a layout design in Angular 9 and utilizing the ngx-masonry package (https://www.npmjs.com/package/ngx-masonry) to achieve a specific grid structure.
Here’s a snippet of my code:
<div class="container pt-5">
<ngx-masonry>
<div ngxMasonryItem class="masonry-item" *ngFor="let item of masonryItems">
<img src="{{ item.src }}">
</div>
</ngx-masonry>
</div>
And here is the TypeScript component part:
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 {
}
}
The current display result can be seen https://i.sstatic.net/xo1YD.jpg
I'm looking for guidance on how to properly format the images in a masonry layout. Any suggestions?