I made a Webflow masonry grid and you won't believe how
HTML-код
- Опубликовано: 8 фев 2023
- Get our free Webflow Mistakes 101 ebook: www.fitrmedia.com/webflow-mis...
In this video Michael ( @bmichaelgroff ) will show you the easiest way to build a masonry grid in Webflow. This method works perfectly for static layouts as well as dynamic layouts pulling data from the Webflow CMS or 3rd party APIs.
Webflow development:
www.fitrmedia.com/
Need Webflow consulting?
www.fitrmedia.com/services/we...
#fitrmedia #webflow #startups 
Развлечения
Thank you man, thanks for sharing
Love this! thanks for sharing your ideas - so creative
Such a Simple and Helpful Content
Very nice, thanks bro!
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?
Thanks so much!
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.
Always coming with something new
Try too!
thanks. quick and simple. at 3:00 he goes over the CMS implementation.
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.
Great vid thank you!
Glad you liked it!
What a great idea 👍
Yea it’s pretty cool!
Please do the basics of a video sharing website like youtube.😊
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?
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.
Great!
👊
Is it possible for portfolio reels in the 9:16 format?
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!
Could this be used for a video sharing website like yourube
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.
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.