Reader: use react-masonry-component for StartCards

[TooTallNate]

Uses Masonry for layout in Cold Start (see https://github.com/eiriklv/react-masonry-component).

This renders the StartCards from left to right, rather then top to bottom via columns.

Example:

(Note that "TechnoScience as if People Mattered" is the 2nd entry in the DOM list, and is being rendered to the right of the first StartCard, as expected).

This is expected to make the interaction of loading more recs (#5652) be more pleasant.

/cc @jancavan @bluefuton

Test live: https://calypso.live/?branch=add/reacy-masonry-component

[jancavan]

This is awesome Nate! 👏

Added a small update here: 949a989, just made margin around cards equal.

[jancavan]

Fixed a breakpoint issue in: df6faa4

@TooTallNate it seems like the gap between columns stays the same regardless of the size of the cards - even with the original width of 350px. Is there a way to make the gap between columns same size as the gap above cards?

Should be around 14px.

[mtias]

@jancavan @TooTallNate can't we achieve this just with flexbox these days (with flex-wrap)? I found this link with a quick search.

[bluefuton]

The cards don't appear in exact source order (e.g. the final card is on the bottom left for me), but should be close enough to vastly improve the loading experience for new cards 👍

[bluefuton]

can't we achieve this just with flexbox these days (with flex-wrap)?

@jancavan has experimented with Flexbox and Columns, and ultimately we've not found a solid solution (yet) that offers:

• variable height cards
• variable number of cards (so hard to set fixed height on container)
• cards flowing horizontally in HTML source order

Horizontal flow seems to be the trickiest part.

[bluefuton]

Looks good to me 🚢