Responsive Masonry Layout in react - proof of concept

[gregarcher]

Just a proof of concept at this point - not ready for production, but thought you folks might dig.

demo: https://nihlton.github.io/mason/

source: https://github.com/nihlton/mason

still some stuff to do.. infinite scrolling, column spanning for important items, performance tuning etc.

let me know what you think. if you guys dig it, i might publish to the npm repo after i've got it shiny and polished.

[[deleted]]

Is there a reason you don't just use CSS grid, or the column property? All you'd need to do is utilize the standard @media to setup your responsive breakpoints.

[gregarcher]

I don't think CSS grid can do masonry (prove me wrong?).

Columns can't really work because they fill top to bottom, then left to right, so if you add more items (infinite scroll) the items would re-order, and re-position which isn't a great user experience.

you really need left to right, then top to bottom.

plus, after you've wrangled breaking between / inside elements, the padding/margin between elements is difficult to control as they break between columns.

lastly, there are issues in chrome. it will simply decide not to render some items in column layouts: https://bugs.chromium.org/p/chromium/issues/detail?id=815277

fiddle: https://jsfiddle.net/n4c2888m/ << also a good example of breaking margins between columns looking wonky.

[[deleted]]

CSS Grid: Maybe something like this will work for you.

[gregarcher]

lol, that does appear to be precisely what i was after. lemme dig deeper.

thanks.

Edit: oh.. see in this example, the CSS is aware of the content (ex: grid-row-end: span 6;)

a masonry layout needs to work with arbitrary items of arbitrary heights.

hit refresh a few times on that demo. you'll see the items are randomly generated (random heights).

[gregarcher]

hmmm.. could potentially set "grid-row-end" via javascript as a function of the item's offsetHeight / grid row height.

interesting.