FR: Display insights in cascading view instead of restrict view

Instructions

Search

Tips

Describe the problem to be solved

As a developer, I want to be able to put arbitrary amounts of information in the insights card without breaking he layout.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution that you'd like

The idea is using a cascading grid instead of a "normal" grid.

For instance, in case we have an insight with a title longer than one line and some more content, we break it completely:

By using a cascading grid, it could be displayed as:

Notice that the gaps between rows is not there anymore.

Additional context

I don't know any "native" way to do that in css and don't know how it would affect usability (in which order would we put the insights in the screen, considering that the top ones (considering the ordering method) are on shown higher than lower priority ones.

There is a js library that makes such layout possible, but I don't know how well it plays with bootstrap and vue.js:

https://masonry.desandro.com/ https://madewithvuejs.com/vue-masonry