wadackel / react-stack-grid

Pinterest like layout components for React.js
https://wadackel.github.io/react-stack-grid/
MIT License
870 stars 77 forks source link

Adjusting the StackGrid component's width breaks the display #67

Open loganmay opened 5 years ago

loganmay commented 5 years ago

First off, I'd like to say that this Component is awesome and I've really enjoyed using it in my project! Thanks so much for the fantastic work!

I did run into an issue, however. I have the stack grid set up as follows: <StackGrid {...this.getStackGridProps()} style={{width: this.props.width}}> {this.renderGridItems()} </StackGrid>

Some logic outside of the component toggles that width style prop between 50% and 100%. When going from 100% to 50%, the grid always arranges in interlocking perfection. However, when going from 50% to 100%, there are uneven spaces between the grid items. Here's a picture with some scribbled arrows pointing to the spaces that shouldn't be there.

I've experimented with calling updateLayout() on a ref attached to the StackGrid component, as well as using different values for the width (e.g. vw instead of %), but that hasn't seemed to make a difference.

If you have any thoughts or can look more into this, please let me know!

I also had another error where certain rerenders caused the items to scramble around on the screen with similar uneven gaps to the ones pictured. I can follow up with another issue there if the maintainers so desire. Thanks!

Bulala-liu commented 5 years ago

I also have the problem. I just set like this : <StackGrid columnWidth={'50%'} gutterWidth={25}>