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.

Example:

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

Regards!
Anna

36 Likes
How to apply a masonry style to elements on a page
Masonry Layout With Flexbox
Staggered display for items in CMS
Image Gallery Design
How to make a feed similar to Pinterest's smart feed or Instagram's explore feed
Dynamic List grid layout breaks with long content
Pinterest style feed with flex and dynamic lists - Help :(
Need help with masonry effect: Flexbox or Columns?
Blog Cards of different height
CMS Blog Grid with uneven rows
Two columns Masonry Grid / CSS + JavaScript - RESOLVED
Two columns Masonry Grid / CSS + JavaScript - RESOLVED
Collection list items aligning with vertical gaps
How are you implementing fallbacks for CSS grid?
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
Elements being displayed with no specific height
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
Help recreating specific (simple!) design
Collection list seamlessly populated with different aspect ratio images
Thumbnails occupying variable number of "blocks"
Lightbox not working on my masonry grid
Typographic Masonry Grid
Need web design help for new website
Can anybody help with different height collection list items?
Creating responsive gallery with varying heights. Grids or Columns?
Masonry grid messing with overlays
Problem with divs positioning (grid)
Dynamic list layout on blog homepage
Asymmetrical Grids
Stacking organically in a grid
Lightbox thumbnail
Dynamic list with lightbox images displayed in masonry grid
Dynamic List into a different Collection Page Template

Great work @sabanna I’m so glad that you found that! :smiley: here’s an example of this working with Dynamic lists: http://flow-in.webflow.io/masonary
Read-Only Link: https://preview.webflow.com/preview/flow-in?preview=99d20c3007c32ab09ef1da4455a8de8c

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

9 Likes

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

2 Likes

my goodness this looks cool! We need a wiki…

3 Likes

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

5 Likes

Hahaha! Webflow magic :wink:

6 Likes

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

1 Like

You girl are awesome :heart_eyes:

2 Likes

Can you share your read-only link?

2 Likes

Here it is:

https://preview.webflow.com/preview/opsrc-12471d?preview=213578e1124f4b9954760e08ffdaa7c4

1 Like

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.

2 Likes

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.

Cheers,
Anna

3 Likes

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?

https://preview.webflow.com/preview/testings-ccae61?preview=086f8c863cc4142c7c63cd82ede3517f

1 Like

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

1 Like

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.

:slight_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:

1 Like

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

1 Like

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:
https://preview.webflow.com/preview/buro-tank?preview=ca77e59b29ee314383a796e13d7164e0