@masonry-grid/vanilla

Note

Before starting use Masonry Grid, make sure to read the prerequisites guide to set up necessary CSS styles for the container and items.

RegularMasonryGrid

Standard masonry layout that stacks items by pulling them up to fill gaps.

import { RegularMasonryGrid } from '@masonry-grid/vanilla'

const grid = new RegularMasonryGrid(container)

BalancedMasonryGrid

Balanced masonry layout that reorders items inside rows to minimize overall grid height.

import { BalancedMasonryGrid } from '@masonry-grid/vanilla'

const grid = new BalancedMasonryGrid(container)

#destroy()

Both MasonryGrid and BalancedMasonryGrid have destroy() method that destroys the grid instance and cleans up all observers and styles.

grid.destroy()