Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
# Changelog

## Unreleased
## 0.0.2 — 2026-09-12

**If you are on Angular 17 to 21, this is the release that lets you install the package at
all.** `0.0.1` declared a peer range of `^22.0.0`, so npm refused it everywhere else.

Nothing in the library's runtime changed. The one change that affects installing it is the peer
range; everything else is documentation, examples and project setup.
Expand Down
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ understanding the layout engine.
[**Ways to help**](CONTRIBUTING.md#ways-to-help) lists what would help most right now.
[Opening a pull request](CONTRIBUTING.md#opening-a-pull-request) is three commands and no ceremony.

If it works well for you, a star helps other people find it — search and recommendations both weigh
it. If it doesn't, an issue helps more.

## License

MIT — see [LICENSE](LICENSE).
8 changes: 5 additions & 3 deletions llms.txt
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
# masonry-angular

> Cascading grid ("masonry") layout for Angular — the Pinterest-style layout where columns are equal
> width, items have different heights, and each item goes into the shortest column. Zero runtime
> dependencies, 8.6 KB gzipped, signal-based, zoneless, SSR-safe. Works on Angular 17.1 through 22.
> Cascading grid ("masonry") layout for Angular — columns are equal width, items have different
> heights, and each item goes into the shortest column instead of waiting for a new row. Use it for
> photo galleries and, just as often, for dashboards of charts and KPI cards, where a normal CSS
> Grid leaves empty space under every short card. Zero runtime dependencies, 8.6 KB gzipped,
> signal-based, zoneless, SSR-safe. Works on Angular 17.1 through 22.

Install with `npm install masonry-angular`. Import `NG_MASONRY_GRID` — an array of all four
directives — into a standalone component's `imports`.
Expand Down
18 changes: 13 additions & 5 deletions projects/masonry-angular/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
Cascading grid ("masonry") layout for Angular. Its own solver — no `masonry-layout`, no jQuery, no
`imagesLoaded`, no runtime dependencies at all. 8.6 KB gzipped.

For photo galleries, and for dashboards of charts and KPI cards — anywhere a CSS Grid leaves empty
space under the short items.

```html
<masonry-grid columns="3" gutter="20">
@for (photo of photos(); track photo.id) {
Expand Down Expand Up @@ -131,12 +134,17 @@ Standalone became the default in Angular 19; before that, `imports:` on its own

## Help shape it

This is version 0.0.1 — early enough that your opinion still changes the API.
This is version 0.0.2 — early enough that your opinion still changes the API.

**Something broke, or felt harder than it should?**
[Open an issue.](https://github.com/MeAkib/masonry-angular/issues/new/choose) "I expected X and got
Y" is a complete bug report — you do not have to diagnose it. This is the single most useful thing
anyone can do for the project right now, and it is worth more to me than any other kind of support.

The most useful thing you can do is use it in a real project and
[open an issue](https://github.com/MeAkib/masonry-angular/issues/new/choose) about whatever went
wrong or felt harder than it should. "I expected X and got Y" is a complete bug report; you do not
have to diagnose it.
**Does it work well for you?** A
[star on GitHub](https://github.com/MeAkib/masonry-angular) is how other people find this. Search
and recommendations both weigh it, so it genuinely decides whether the next person with the same
layout problem ever sees it.

Also wanted, and none of it requires touching the library: Safari and Firefox reports, mobile and
RTL testing, a screen-reader audit, translations of the getting-started guide, and demo examples
Expand Down
7 changes: 6 additions & 1 deletion projects/masonry-angular/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "masonry-angular",
"version": "0.0.1",
"version": "0.0.2",
"description": "Zero-dependency masonry layout for Angular. Signal-based, zoneless, SSR-safe.",
"keywords": [
"angular",
Expand All @@ -14,6 +14,11 @@
"pinterest",
"columns",
"responsive",
"dashboard",
"dashboard-layout",
"charts",
"widgets",
"cards",
"gallery",
"image-gallery",
"signals",
Expand Down
Loading