Hello!
Is there a way to have a mansory view instead of just a grid?
Right now when I use a grid and have different height “cards”, each line will take the height of the biggest card.
What I wouldl like to have is something like this:
Thank you in advance
Wrapper CSS:
column-width: 350px;
column-gap: 20px;
Children elements CSS:
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
Sorry for not replying earlier. I just tried and it works perfectly.
Thank you so much 
its a nice and simple solution done with CSS.
However, this isn’t the true masonry layout as shown in the screenshot above. 
This approach works well when the order of the items doesn’t need to strictly follow a left-to-right sequence. But this is often the case when telling a story with a series of images, such as for wedding photos, or for news teaser elements with an order from newest to oldest.
example with wedding-images:
https://www.miandla.com/en/blog/marry-hotel-belvoir-rueschlikon
it tells the story from getting-ready to first dance.
There is a trick to use grid for news teasers, also without JavaScript, just CSS. But it works only if the content of each element is approximately the same amount.
example here:
https://www.skillaware.ch/en/blog