https://github.com/soenneker/soenneker.blazor.masonry
A Blazor interop library that integrates Masonry, the cascading grid layout library
https://github.com/soenneker/soenneker.blazor.masonry
blazor csharp css dotnet grid-layout interop masonry
Last synced: 17 days ago
JSON representation
A Blazor interop library that integrates Masonry, the cascading grid layout library
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.blazor.masonry
- Owner: soenneker
- License: mit
- Created: 2023-02-03T15:09:40.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2026-06-05T20:43:38.000Z (21 days ago)
- Last Synced: 2026-06-05T21:11:10.598Z (21 days ago)
- Topics: blazor, csharp, css, dotnet, grid-layout, interop, masonry
- Language: CSS
- Homepage: https://soenneker.com
- Size: 2.54 MB
- Stars: 15
- Watchers: 1
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/Soenneker.Blazor.Masonry/)
[](https://github.com/soenneker/soenneker.blazor.masonry/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/Soenneker.Blazor.Masonry/)
[](https://github.com/soenneker/soenneker.blazor.masonry/actions/workflows/codeql.yml)
#  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`)
```csharp
public static async Task Main(string[] args)
{
...
builder.Services.AddMasonryInteropAsScoped();
}
```
## ?? Components
### `Masonry`
Wraps a group of items in a Masonry layout.
```razor
// or if not Bootstrap, a different class
...
```
**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.
```razor
...
```
Automatically appends `masonry-item` to the `class` attribute.
---
## ?? Example
```razor
@foreach (var card in _cards)
{
@card.Title
@card.Text
}
@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.
```csharp
@inject IMasonryInterop MasonryInterop
```
### Warmup (Script Load)
```csharp
await MasonryInterop.Warmup(); // Loads Masonry script from CDN
```
Or use the embedded version:
```csharp
await MasonryInterop.Warmup(useCdn: false);
```
### Initialize Layout
```csharp
await MasonryInterop.Init("myElementId");
```
Advanced options:
```csharp
await MasonryInterop.Init(
elementId: "gallery",
containerSelector: "#gallery",
itemSelector: ".masonry-item",
columnWidthSelector: ".masonry-sizer",
percentPosition: true,
transitionDurationSecs: 0.25f,
useCdn: true
);
```
### Force Layout Recalculation
```csharp
await MasonryInterop.Layout("gallery");
```
### Set Up Mutation Observer
```csharp
await MasonryInterop.CreateObserver("gallery");
```
### Destroy Instance
```csharp
await MasonryInterop.Destroy("gallery");
```
> ?? **Note:** The `Masonry` component handles these automatically. Use manual interop when building custom wrappers or integrations.