Documentation
Fuse Components
Components

## Masonry

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

import { FuseMasonry } from '@fuse/components/masonry';

## 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

@for (column of columns; track column) {
@for ( item of column.items; track item ) {
{{ item }}
}
}
<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"> <!-- Column --> <div class="flex-1 mx-2 p-2 border rounded space-y-2"> <ng-container *ngFor="let item of column.items"> <!-- Item --> <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

@for (column of columns; track column) {
@for ( item of column.items; track item ) {
{{ item }}
}
}
<fuse-masonry class="-mx-2" [items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" [columns]="columns" [columnsTemplate]="columnsTemplate"> </fuse-masonry> <ng-template #columnsTemplate let-columns> <ng-container *ngFor="let column of columns"> <!-- Column --> <div class="flex-1 mx-2 p-2 border rounded space-y-2"> <ng-container *ngFor="let item of column.items"> <!-- Item --> <div class="p-2 text-center rounded bg-primary text-on-primary"> ITEM CONTENT </div> </ng-container> </div> </ng-container> </ng-template> 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; } });