Soenneker.Blazor.Masonry 3.0.2021

Soenneker.Blazor.Masonry 🧱

A lightweight, responsive Blazor component for Masonry (the cascading grid layout library) — perfect for image grids, cards, and dynamic content.

✨ Features

• Fully compatible with Bootstrap grid classes
• Script auto-loading (CDN or embedded)
• No manual cleanup required

Installation

dotnet add package Soenneker.Blazor.Masonry

Usage

1. Register the interop within DI (Program.cs)

public static async Task Main(string[] args)
{
    ...
    builder.Services.AddMasonryInteropAsScoped();
}

🧩 Components

Masonry

Wraps a group of items in a Masonry layout.

<Masonry AutoRender="true" class="row"> // or if not Bootstrap, a different class
    ...
</Masonry>

Parameters:

• AutoRender – Automatically initializes layout after render
• SizerClass – Automatically adds a sizer with the given class(es). Used by Masonry to determine width of a single column.

MasonryItem

Wraps a single item in the layout and adds the required class.

<MasonryItem class="col-md-6">
    <div class="card">...</div>
</MasonryItem>

Automatically appends masonry-item to the class attribute.

🚀 Example

<Masonry AutoRender="false" SizerClass="col-sm-1" @ref="_masonry" class="row">
    @foreach (var card in _cards)
    {
        <MasonryItem class="col-lg-4 col-md-6 mb-4">
            <div class="card">
                <img src="@card.ImageUrl" class="card-img-top" />
                <div class="card-body">
                    <h5>@card.Title</h5>
                    <p>@card.Text</p>
                </div>
            </div>
        </MasonryItem>
    }
</Masonry>

@code {
    private Masonry _masonry = null!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Example delay for images to load
            await Task.Delay(3000); 
            await _masonry.Init();
        }
    }
}

🔄 Initialization

• If AutoRender is true, Masonry initializes on first render.
• If false, call Init() manually when ready (e.g., after images load).
• No disposal needed – cleanup is handled automatically when navigating away.

🧠 Manual Interop Usage

If you want full control without using the Masonry component, you can use the provided IMasonryInterop service directly.

@inject IMasonryInterop MasonryInterop

Warmup (Script Load)

await MasonryInterop.Warmup(); // Loads Masonry script from CDN

Or use the embedded version:

await MasonryInterop.Warmup(useCdn: false);

Initialize Layout

await MasonryInterop.Init("myElementId");

Advanced options:

await MasonryInterop.Init(
    elementId: "gallery",
    containerSelector: "#gallery",
    itemSelector: ".masonry-item",
    columnWidthSelector: ".masonry-sizer",
    percentPosition: true,
    transitionDurationSecs: 0.25f,
    useCdn: true
);

Force Layout Recalculation

await MasonryInterop.Layout("gallery");

Set Up Mutation Observer

await MasonryInterop.CreateObserver("gallery");

Destroy Instance

await MasonryInterop.Destroy("gallery");

💡 Note: The Masonry component handles these automatically. Use manual interop when building custom wrappers or integrations.