Grid does not render dynamically on initial render

[treygilliland]

Expected behaviour

Post-initial render, the movement is very fluid and images are able to resize dynamically to keep a consistent 'grid' of images. This would be expected to occur at all times, even on the initial render.

Actual behaviour

At various widths, the initial render doesn't produce a grid. Once the page has been resized (ex: by zooming/dragging the window), the expected grid effect is rendered.

Steps to reproduce behaviour

1. Navigate to one of the available examples like this one
2. Drag to a width right where an image from the row below comes up to the row above
3. Refresh the page

It can be hard to reproduce as it doesn't seem to do this effect every time. See the examples below:

Examples:

I am having a similar issue that could be related (or unrelated) on my own implementation where the grid will only render N-1 columns of the grid but will work totally fine after resizing the page. I have tried setting hardcoded widths as suggested to no avail.

Initial render:

After resizing:

Operating system

MacOS

Browser and version

Chrome

Hardware

M1 Macbook Pro

Other Notes

Just wanted to say, this package is great and has fit my needs thus far! Thanks for the hard work and maintenance over the years @benhowell

[treygilliland]

Disregard my personal issue of the Nth-1 column. I found that the div I had around it actually didn't need the width to be set but rather overflowY needed to be set to scroll instead of auto. Here is the div I use around my gallery component:

<div
  style={{
    overflowY: 'scroll',
    height: '100vh',
    padding: '24px 32px 24px 32px',
    justifyContent: 'center',
  }}
>

[benhowell]

Thanks for the kind words, @treygilliland .
Looks like it could be related to #277.

Does this effect occur outside of codesandbox?

Also, as an aside: what are you working on? Looks like you've got some sort of object detection software there?

I've done some object detection stuff in the past (couple of examples here: https://benhowell.github.io/guide/2015/03/09/opencv-and-web-cam-streaming), so I'd be interested to hear what you're doing.

[treygilliland]

Ahh yes, looks like it is the same issue as #277. I haven't seen this outside of codesandbox. Feel free to close as I solved my unrelated issue.

The company I work at provides recycling facilities with analytics using object detection. We are currently experimenting with exposing our image data to our clients through our web app. I wanted a Google Photos-type experience and found this library which is working well so far.

It's awesome you were working with CV back in 2015, it really has evolved so much since then yet opencv is still king.

[benhowell]

Thanks @treygilliland and all the best with the web app.
Closing as duplicate. See #277