Masonry-like layout

[SqueezedLight]

Hi guys, can someone provide me with an example of a masonry-like layout? I'm having a hard time getting things to work. In my case every item has a different height. So i don't get how to set the layout accordingly, because the examples provided only use multiples of a specific height...
At the moment i use:
<ResponsiveReactGridLayout className="layout" breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}} cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>

This adjusts the width of my items perfectly. But as described above every container has the same height - i know how to set this height to another value, but i need a container the same height as my item.

Beside that all items are on the same position (stacked on each other).

An example or any help would be much appreciated,
thanks a lot!

[STRML]

Hey @SqueezedLight ,

Unfortunately, you will need to know the height of your items ahead of time, as this library does not have the ability (or the desire) to read from the DOM and adjust. It is meant to be a pure implementation, like React, where the DOM is considered write-only.

If you know your element heights ahead of time, you can change the rowHeight to something small like 10, and define the height as closely as possible. You may be able to even get away with 1, although I haven't tried it myself.

Set isDraggable and isResizable props to {false} and you should be on the right track.

[SqueezedLight]

Hi, thanks for the fast reply and the good explanation. Glad i didn't miss something important :D