React Hooks Masonry

[utterances-bot]

React Hooks Masonry | Publiuslogic

React Hooks Masonry

https://publiuslogic.com/

[cordial]

hey. Nice work! I was wondering how you would enhance this by having a number of columns value for different breakpoints so that it is more responsive? It is rare you're going to want the same number of columns no matter what the viewport size.

[cordial]

Although I guess you can only have more than one masonry grid and hide/display them on viewports as one workaround.

[donaldboulton]

I am slowly changing from a mess of styled-components and global styles with bulma css and have not quite figured out my columns and breakpoints. Need to do this as bluma does not let me have a sticky TOC in its own column and remain sticky. Your suggestion is perfect for what my confusion is on needed changes are.
That is something very interesting. Changing the number of columns based on breakpoints.
I will work on that and get back to this.
Thank You
Donald Boulton

[cordial]

hey again. I'm not sure what I am doing wrong but the number of columns seem to be changing randomly between 1,2,3 upon refreshes?

I had presumed I can change number of cols here? -

' const [numCols, setNumCols] = useState(2)'

[cordial]

Are the number of columns supposed to change in reference to minWidth? I'm not sure I've understood your code quite correctly, sorry.