fuse-masonry is a basic Masonry layout component to show items in Masonry grid layout. Since it doesn't use any other third party library or complex calculations to keep everything smooth and fast;

It does NOT work with elements with different widths
It does NOT sort items based on their heights (This here is the real performance killer)

If you don't need to mix and match different width items and don't need to sort items based on their heights, fuse-masonry will do the job for you and it will do it very smoothly.

Exported as: fuseMasonry

Module

Properties

Name	Description	Default
@Input() columnsTemplate: TemplateRef	Column template for masonry component to lay out.	`undefined`
@Input() columns: number	Number of columns to create	`undefined`
@Input() items: any[]	Items to distribute into columns	`[]`

Methods

This component doesn't have any public methods.

Usage

fuse-masonry doesn't provide a default template or styling to the items. You can think of it as a helper function but in a component form:

Example

<fuse-masonry
                            class="-mx-2"
                            [items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
                            [columns]="4"
                            [columnsTemplate]="columnsTemplate">
                        </fuse-masonry>

<ng-template
                            #columnsTemplate
                            let-columns>
                            <ng-container *ngFor="let column of columns">
                                
                                <div class="flex-1 mx-2 p-2 border rounded space-y-2">
                                    <ng-container *ngFor="let item of column.items">
                                        
                                        <div class="p-2 text-center rounded bg-primary text-on-primary">
                                            ITEM CONTENT
                                        </div>
                                    </ng-container>
                                </div>
                            </ng-container>
                        </ng-template>

Responsive

fuse-masonry doesn't provide a way of changing the column count depending on breakpoints but this can easily be handled by combining fuse-masonry with FuseMediaWatcherService:

Example

<fuse-masonry
                            class="-mx-2"
                            [items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
                            [columns]="columns"
                            [columnsTemplate]="columnsTemplate">
                        </fuse-masonry>

columns: number = 4;

// Subscribe to media changes
                        this._fuseMediaWatcherService.onMediaChange$
                            .pipe(takeUntil(this._unsubscribeAll))
                            .subscribe(({matchingAliases}) => {

// Set the masonry columns
                                //
                                // This if block structured in a way so that only the
                                // biggest matching alias will be used to set the column
                                // count.
                                if ( matchingAliases.includes('xl') )
                                {
                                    this.columns = 5;
                                }
                                else if ( matchingAliases.includes('lg') )
                                {
                                    this.columns = 4;
                                }
                                else if ( matchingAliases.includes('md') )
                                {
                                    this.columns = 3;
                                }
                                else if ( matchingAliases.includes('sm') )
                                {
                                    this.columns = 2;
                                }
                                else
                                {
                                    this.columns = 1;
                                }
                            });