How do you center the grid elements? about react-masonry-component HOT 9 CLOSED

I know this is already closed, but I wanted to say that I was able to get that solution (http://masonry.desandro.com/options.html#fitwidth) working correctly.

Just add isFitWidth into the options prop, and style whatever you passed in as className with margin: 0 auto.

Thanks!

from react-masonry-component.

Yeah, works fine

https://codesandbox.io/s/ly8mqzm54z

You need to remember that fitWidth doesn't actually centre the Masonry wrapper for you, it simply ensures that it will work when you apply margin: 0 auto; to the grid css.

from react-masonry-component.

@kevinchiu apologies for the late reply, I didn't see this ticket.

Have you found a solution?

Does this do what you want? http://masonry.desandro.com/options.html#fitwidth

from react-masonry-component.

@kevinchiu closing due to inactivity. Please reopen if this is still an issue :-)

from react-masonry-component.

@kenhoff - this doesn't work anymore. I've tried isFitWidth and fitWidth and neither works. Is this still being supported?

from react-masonry-component.

It shouldn't have changed. That just gets passed to Masonry under the hood.

from react-masonry-component.

@afram - I mean, I agree. Maybe it just doesn't do what I think it's supposed to.
I was under the impression that you give a columnWidth and if you set isFitWidth to true, then the content should always be centered and spaced evenly. Is that not the case?

Also, isFitWidth seems to be deprecated in the documentation. Does it somehow pass fitWidth instead of isFitWidth to the instance of Masonry under the hood?

from react-masonry-component.

Did you see this disclaimer on the Masonry docs?

fitWidth: true does not work with element sizing with percentage width. Either columnWidth needs to be set to a fixed size, like columnWidth: 120, or items need to have a fixed size in pixels, like width: 120px. Otherwise, the container and item widths will collapse on one another.

Masonry hasn't been updated from v4.2.2 in 8 months.

both fitWidth and isFithWidth should still work.

Maybe it's worth putting together an example in https://codesandbox.io/?

from react-masonry-component.

To be honest, I haven't looked at this in a long time. From what I can see in the code it should still be working. I'm going to put together an example myself for my own sanity...

from react-masonry-component.