Drop Masonry Layout for image grid

[brenoferreira]

Masonry Layout doesn't work on Server Side Rendering due to browser API dependencies. So it's only rendered on the client.

It also doesn't seem to be very accessible, as tabIndex doesn't seem to work, so users who don't use a mouse as input device, but rather a keyboard or some other accessibility device, probably can't browse through the results.

Ideally, the new grid should be rendered using CSS Grid or Flexbox, with no JS dependency on browser document APIs

[brenoferreira]

This might work: xieranmaya/blog#6

[dos077]

I ported brenoferreira's suggestion to Vue. It works fine. Is this still an issue? I've only made the thumbnails img tags. Will need to rework and probably rename the gridcell components.

Screenshot:
https://drive.google.com/file/d/1D1sEILcG1vPutOYv3XsHOnNbco3Oz_AW/view?usp=sharing

Mobile:
https://drive.google.com/file/d/1se_vLgnQXtLjWcnsnFskGJYrke2BF1Xo/view?usp=sharing

[brenoferreira]

Feel free to open a pull request