Allows you to have masonry style tiles with Material Grid List.

npm i masonry-tile --save

• peerDependencies:

  • angular 18.0.0 and more
  • angular/material 18.0.0 and more

Use for older versions:

• 1.1.0: angular >= 16.0.0 & angular/material >= 16.0.0
• 1.0.0: angular >= 13.0.0 & angular/material >= 13.0.0

See a demo.

Example with a list of images and description.

<mat-grid-list #matGridList [cols]="4">
    <mat-grid-tile *ngFor="let imageItem of images" #matGridTile>
        <masonry-tile [rowHeight]="1" [gutterSize]="1" [matGridTile]="matGridTile" [matGridList]="matGridList">
            <!-- content start -->
            <img [src]="imageItem?.src" [alt]="imageItem?.alt" />
            <div>{{ imageItem?.alt }}</div>
            <!-- content end -->
        </masonry-tile>
    </mat-grid-tile>
</mat-grid-list>

• matGridTile (Required) : reference to matGridTile
• matGridList (Required) : reference to matGridList

Include in your module:

import { MatGridListModule } from '@angular/material/grid-list';
import { MasonryTileModule } from 'masonry-tile';

@NgModule({
    imports: [
        MatGridListModule, // required
        MasonryTileModule,
    ],
})
export class MyModule {}

npm run build:lib
npm run publish:lib

npm run build:demo

Like Angular, this module is released under the permissive MIT license. Your contributions are always welcome.