Streaming live at 10am (PST)

Webflow Masonry grid ( #Pinterest), no Custom Code required


Continuing the discussion from Masonry grid ( #Pinterest) in Webflow. Created by CSS only:

So lately, I found out that same CSS Masonry grid is possible to create WITHOUT ANY CUSTOM CODE. All you have to do is use Webflow text columns option for your "grid container" (or div, or section).
Items inside your container could be images, div blocks with text inside, lightboxes, link blocks, but they have to have WIDTH=100%. With every screen type (desktop, tablet, mobile) you can easy change columns option.

So, no more custom code. Masonry grid made with few clicks.

Here is examples:

Also, if you will add some creative you can even get a more interesting grid. Just make some of your items WIDTH=50%. But don't forget that for this items height should be the same.


And sure, you can use these settings with dynamic list and dynamic items! :smile:


Masonry Layout With Flexbox
Dynamic list with lightbox images displayed in masonry grid
Staggered display for items in CMS
Blog Cards of different height
Dynamic List grid layout breaks with long content
Image Gallery Design
How to apply a masonry style to elements on a page
Pinterest style feed with flex and dynamic lists - Help :(
Need help with masonry effect: Flexbox or Columns?
Lightbox thumbnail
Asymmetrical Grids
Two columns Masonry Grid / CSS + JavaScript - RESOLVED
Masonry grid messing with overlays
Wookmark with dynamic lists
How to create a portfolio with a collage layout
Photos at the top right flash when scrolling down
Flexbox Full-width Responsive Multi-size Image Grid
Masonry grid help
Dynamic List into a different Collection Page Template
Two columns Masonry Grid / CSS + JavaScript - RESOLVED
How to make a feed similar to Pinterest's smart feed or Instagram's explore feed
Collection list items aligning with vertical gaps
How are you implementing fallbacks for CSS grid?
Help recreating specific (simple!) design
Lightbox with masonry grid layout
[TUTORIAL] MixItUp filtering plugin with Dynamic content
Need help with dynamic grid layout
Inherited a messy toggle grid, what tutorials do i need?
Horizontal Masonry
Problem with divs positioning (grid)
Dynamic list layout on blog homepage
Elements being displayed with no specific height
Stacking organically in a grid

Great work @sabanna I'm so glad that you found that! :smiley: here's an example of this working with Dynamic lists:
Read-Only Link:

Have fun! :smiley: I added a loading screen to this page (which fades out once assets have loaded).

Isotope + Webflow... Filter grid based layouts with ease

Yeah! Really there are so many possibilities with such easy way to create this type of grid! :smiley:


my goodness this looks cool! We need a wiki...


Absolutely brilliant. You just moved from hero of the day to hero of the week. =)


Hahaha! Webflow magic :wink:


I looked in this but I don't see how it was accomplished.


You girl are awesome :heart_eyes:


Can you share your read-only link?


Here it is:


Ok - I got the masonry grid but it doesn't flow left to right, date goes by column. I don't know if I like that. Is there a way to paginate my posts so I can make sure it's fresh content in the grid? I have a million questions right now, I know. I also have a filter issue with the same site.


Awesome find! but I can't get it to work :weary: can you explain a little bit more how to achieve that?

I tried putting various images inside a Div or Div's inside that first Div but it doesn't work and I get a strange cut on the images (div's).

Thank you very much in advance.


Hi @aaronocampo,
For proper alignment, make items inside the "grid div" display: inline-block and make sure their width is 100%.
Try it and let me know if it fixed the problem.



EDIT: Made it Inline Block, as you mentioned in one post. Solved! :smiley:

@sabanna Thank you so much :smile:

But there is one thing I cant solve
The ending of one block continues to next row,

see img

You know what Im doing wrong?


Getting here a little late.. If I could hug you through the interwebz @sabanna, I would! Thanks!


Hi @krubens,
what if you will put rich text block in wrapper div? I think in that way it has to count like one whole item, not a text.


:smile: you are welcome, glad that it become really useful stuff


All boxes are Divs, just hadn't set them to inline block, that saved the day :smile:


Thank you again Sabana, YOU ROCK!! Worked like a charm.


For some reason it is not possible to integrate a webflow slider in the columns: when the slider is positioned after the first column the content (slides, left + right arrows, slide nav) doesn't show up. I have been looking for a solution, but up till now I didn't succeed. Any ideas?

Edit: It is an issue in Google Chrome mac, but not a problem in Safari or Firefox mac.
Readonly link of the raw material: