If you're using this with divs, for example a masonry grid thats full of groups of content and not just images be sure to add this css to your header settings named same as your group of content inside the columns to stop items breaking across columns: .divclass { column-break-inside: avoid; -webkit-column-break-inside: avoid; }
I feel like your comment could save my day! But I don't get where I should add this piece of CSS... 😅 Should I replace ".divclass" by the name of the div I set up the typography options to?
Awesome, been after a native masonry grid for cms for ages! Can't believe this is thanks to the typography section - basically a glitch on Webflow's part? Thanks for the video
It´s there because it´s actually meant to be a typography setting, to have text in columns. That´s also why the elements are aligning/sorting vertically, not horizontally (which does not really make sense for a gallery-kindof-list. It looks nice and easy but - if you need some kind of "normal" content flow (left to right) it does not work unfortunately.
I appreciate this. But not being able to order from left to right ruins it for me. :( I want to be able to incorporate a lightbox for each image in my masonry that have the same lightbox link group name. But the lightbox will only view the next image down instead of from left the right. This is confusing for anyone who views my portfolio. Plus there's no easy way to rearrange my artwork in the masonry manually if I want my first two rows of images to be very specific. Dragging them around in the navigator changes their vertical position, and this is only gonna get more difficult to deal with as my columns get longer with more artwork that I want in a certain order from left to right. I'm not sure what to do.
I just found your video, and it helped me a lot! I totally forgot about this option in Webflow. Thanks! Can you create a tutorial on how to make an animation with two columns, one moving up and the other down? Should I use separate divs, or can we make it with columns?
Hey, I just watched your video and I must say that it was really informative and well-made. I loved your videos. I was wondering if I could help you edit your videos and also make highly engaging shorts for you to grow your business faster.
Thank you very much, the video helped me a lot! But how can I make a photo clickable to display a pop-up? The lightbox element seems to be exactly what I'm looking for. How can I insert it here?
@Fitr Media I'm a bit confused by the naming convention. Are you saying all the images inside the mason_image div must all have the same name because you say they should all be the same class? If this is what you're saying how does this help with SEO. Also, are we able to click on those images and to see the larger version. This is a good video but I think you should create an updated version that address some of these points. TGhank you.
Super helpful! One question - on mobile, at the start of a new column, the margin seems to "rollover" from the last item of the column before. This makes the items not sit flush at the top. Anyway to mitigate this? Doesn't seem to be an issue on desktop breakpoints.
If you're following along, just use the same class name on the images from the first example on the images in the second example and you're good to go.
If you're using this with divs, for example a masonry grid thats full of groups of content and not just images be sure to add this css to your header settings named same as your group of content inside the columns to stop items breaking across columns:
.divclass {
column-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
dude!!! Lifesaver!
Been coding sites for a long time and I'd say i know my way around css pretty well. Never used the "avoid" style ever! Learned something new today.
I feel like your comment could save my day! But I don't get where I should add this piece of CSS... 😅 Should I replace ".divclass" by the name of the div I set up the typography options to?
@@marketingflow2155 haha exactly the same problem here, i dont get where exactly should i put it
where exactly should we put it? sorry dont get it, what do you mean by header section?
Love this! thanks for sharing your ideas - so creative
thanks. quick and simple. at 3:00 he goes over the CMS implementation.
Always coming with something new
Try too!
Awesome, been after a native masonry grid for cms for ages! Can't believe this is thanks to the typography section - basically a glitch on Webflow's part? Thanks for the video
It´s there because it´s actually meant to be a typography setting, to have text in columns. That´s also why the elements are aligning/sorting vertically, not horizontally (which does not really make sense for a gallery-kindof-list. It looks nice and easy but - if you need some kind of "normal" content flow (left to right) it does not work unfortunately.
Such a Simple and Helpful Content
I appreciate this. But not being able to order from left to right ruins it for me. :( I want to be able to incorporate a lightbox for each image in my masonry that have the same lightbox link group name. But the lightbox will only view the next image down instead of from left the right. This is confusing for anyone who views my portfolio. Plus there's no easy way to rearrange my artwork in the masonry manually if I want my first two rows of images to be very specific. Dragging them around in the navigator changes their vertical position, and this is only gonna get more difficult to deal with as my columns get longer with more artwork that I want in a certain order from left to right. I'm not sure what to do.
Don't forget to set the grid wrapper as inline block
thanks, thats was very helpful
Was looking everywhere on how to fix. Very helpful, thank you!
I just found your video, and it helped me a lot! I totally forgot about this option in Webflow. Thanks!
Can you create a tutorial on how to make an animation with two columns, one moving up and the other down? Should I use separate divs, or can we make it with columns?
Thank you man, thanks for sharing
What a great idea 👍
Yea it’s pretty cool!
Great vid thank you!
Glad you liked it!
Very nice, thanks bro!
Hey, I just watched your video and I must say that it was really informative and well-made. I loved your videos. I was wondering if I could help you edit your videos and also make highly engaging shorts for you to grow your business faster.
any thoughts?
Thanks for the offer, Muhammad! but I already have an editor.
Thank you very much, the video helped me a lot! But how can I make a photo clickable to display a pop-up? The lightbox element seems to be exactly what I'm looking for. How can I insert it here?
@Fitr Media I'm a bit confused by the naming convention. Are you saying all the images inside the mason_image div must all have the same name because you say they should all be the same class? If this is what you're saying how does this help with SEO. Also, are we able to click on those images and to see the larger version. This is a good video but I think you should create an updated version that address some of these points. TGhank you.
Super helpful! One question - on mobile, at the start of a new column, the margin seems to "rollover" from the last item of the column before. This makes the items not sit flush at the top. Anyway to mitigate this? Doesn't seem to be an issue on desktop breakpoints.
Thanks so much!
Is it possible for portfolio reels in the 9:16 format?
If you're following along, just use the same class name on the images from the first example on the images in the second example and you're good to go.
Could this be used for a video sharing website like yourube
Great!
👊
Please do the basics of a video sharing website like youtube.😊
This is nuts. I don't understand how this works.