Card 1
Columns balance themselves as content settles.
Dynamic items
Add, prepend, remove and shuffle. There is nothing to call afterwards.
Every button below mutates the source array and nothing else. Item order is derived from the DOM at layout time, so a prepend really lands first — the ordering bug that makes other masonry wrappers expose a manual reloadItems() cannot occur here.
<!-- There is no reloadItems(). Change the array and the grid
follows â prepends land first, because item order is read
from the DOM on every pass. -->
<masonry-grid columnWidth="200" gutter="14" (removeComplete)="onRemoved($event)">
@for (card of cards(); track card.id) {
<article masonryGridItem (click)="remove(card.id)">
{{ card.title }}
</article>
}
</masonry-grid>
<!-- component -->
add() { this.cards.update((c) => [...c, makeCard(this.next++)]); }
prepend() { this.cards.update((c) => [makeCard(this.next++), ...c]); }
remove(id: number) { this.cards.update((c) => c.filter((x) => x.id !== id)); }Card 2
Positioning runs on transforms, off the layout path.
Card 3
A single ResizeObserver watches the whole grid.
Card 4
Order comes from the DOM, so nothing shuffles.
Card 5
Options are validated in development and compiled out of production.
Card 6
Items hold their place until their images decode.
Card 7
Repeated passes with identical input do no work.
Card 8
Columns balance themselves as content settles.
Card 9
Positioning runs on transforms, off the layout path.
Card 10
A single ResizeObserver watches the whole grid.
Card 11
Order comes from the DOM, so nothing shuffles.
Card 12
Options are validated in development and compiled out of production.
Card 13
Items hold their place until their images decode.
Card 14
Repeated passes with identical input do no work.
Card 15
Columns balance themselves as content settles.