Masonry

The Masonry component is a layout component that arranges items in a grid with varying heights. It is useful for displaying images, cards, product images, etc. The column count property can be changed dynamically based on the screen/container width.

note

The column distribution algorithm distributes the items just-in-time, so if you scroll very fast, you will be able to see the arrangement happening.

To add the component to your project, install the @virtuoso.dev/masonry NPM package.

npm install @virtuoso.dev/masonry

Basic example

loading...

Window scroll example

loading...