Grid rendering with only one item in the first column

[maplethorpej]

Describe the bug
The grid intermittently renders with only one item in the first column.

<Masonry
 items={trip.images}
 render={Photo}
 columnGutter={8}
 columnCount={3}
 columnWidth={230}
/>

Expected behavior
I would expect that, as the images load in, the grid shuffles items into the correct spots.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 97.0.4692.99

Additional context
Navigating away from the page and then back fixes the issue, so I'm assuming this has to do with calculating images as they load.

[mikechabot]

I'm just familiarizing myself with this library, but a minimal reproducible example is helpful in these types of cases. Is this window scroll, fixed div scroll? How are your outer containers styled?

[jaredLunde]

My guess is you're lazily loading these images and you need to use itemHeightEstimate prop for more accurate first-pass renders. Shuffling around after the fact would be astronomically bad for performance.