Hi guys,
I followed what I found on You tube and here to build a masonry grid but the fact is that those tutorials consider only using images so the Typography column trick doesn’t works with a lot of text like here
https://preview.webflow.com/preview/once-in-a-wild?utm_medium=preview_link&utm_source=designer&utm_content=once-in-a-wild&preview=1a16c9e6a653d0b50a157ddd9327d1cb&workflow=preview
Has you can see the text is sliding on the other column breaking the design I’m trying to achieve.
I also tried a custom code JS but it is not responsive…
I’m not skilled with code so is why I’m here on Webflow ahah, if you can help me I’ll be really grateful!
In this case we need to create a horizontal flex container.
Inside we create two grids of one column … or as many as we want, but of one column. This way the elements are put in the form of a false masonry grid without the break.
Thank you Romuald.
Yeah I already done this for the moment but I was predicting to use a CMS library to fill it so this could be tricky to out content by date or name or other…
I was trying again right now and I really donno why it is working… Oh ok now I figured out so you can see in the link that with inline blocks inside it works fine, you only need to adjust typography adjustment
Yes nice, “inline bloc” indeed work fine. I ve done mansonery grid recently with video and images and the problem you spoted is intresting because, in this case blocks works fine.
Nice solution in this case
You can also use:
<style>
.class-name {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
</style>
Thank you Smith but if the thing that I avoid is code I’m happier ahahah I’ll try also with that just for curiosity. Thank you guys. I’ll mark it as solved in a few days just the time to see if someone as a different solution for masonry grid ‘cause this is not ideal for responsiveness, infact you are stuck with the number of columns you decide for each breakpoint and not flexible as the viewport width changes…
