CMS masonry grids

Is there a way to make uneven grids using the CMS?

image

When the cms is involved it seems like all Collection Items have to be the same size. Is there a way to replicate something like the image above, using the CMS?

Hey! Sure man! Just use this setup. Remember to copy the custom code on the “Home” page as well. GL man.

View: Webflow - tore-masonry

Live: https://tore-masonry.webflow.io/

2 Likes

Cool thanks! Is there no way to do this natively within webflow?

This solution also doesn’t seem to be responsive, at least not straight out the box

No, we need custom code to achieve this effect. At least of you don’t know the number of items you want within the grid. If you know you only want 9 items (for example), then you can always create 3 divs with 3 CMS generated items in each, set by using the “limit items” option.

No, this one is not responsive right out the box. But that is really easy to do with media queries! If you need help with that, then just say so.

No, we need custom code to achieve this effect.

That’s really frustrating :frowning: thanks! I think the custom code will do and I think I should be able to make it responsive no problem

EDIT: Just realised this question was posted back in 2019, so you have probably solved it by now :smiley: . But maybe it can still help someone else stumbling upon this post. Cheers.

You can also get this to work by using the column settings on the parent element (your collection list for example) in the typography panel.

3 Likes