Tips for Masonry Grid Layout

Flow
1

For a social media wall for a community conference I would like to show the social media posts in a Masonry Grid Layout. Here you see an example:

masonry grid layout example
masonry grid layout example1920Ă—1114 222 KB

In the add-on directory I found a discontinued and archived implementation for Vaadin 7. Before I start building something on my own completely I would like to ask if someone has implemented something and has any tips for me.

Btw, the first time this Vaadin app will be used is at the JavaLand conference (11 days to go) on a 45 m by 8 m screen. Vaadin often had a booth at the JavaLand. Maybe they will be there this year, too? All the boothes have a great view to the social media wall…

2

I did some tests using CSS Grid and “simulate” Masonry. There is an example in CSS: https://codepen.io/georgegriff/pen/LYRgwaJ

That’s probably how I would implement “simple” Masonry grid (maybe with a different code snippet)

1 Like
3

I did a PR: Example of the social view can be displayed by jcgueriaud1 · Pull Request #45 · McPringle/apus · GitHub

I’m not sure why everything is placed in absolute position. That makes the layout quite difficult to update.

1 Like
4

Thank you very much for your contribution, it is highly appreciated!

1 Like