Streaming live at 10am (PST)

CMS Blog Grid with uneven rows

Hey all! I just launched a new website for the organization where I work. I love how it turned out and we’re using Webflow CMS but I have a small issue. You can see the site here:

http://opsrc.net

If you go to the blog page and look you’ll see holes in my grid. I have posted all our posts from our old blog and some rows just have one post and the lack of uniformity is killing me. Any ideas on what I should do?

Any help would be greatly appreciated. Here’s the read-only link to the site:

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

Hi @rileyrichter,

Issue that you are experiencing happens because of structure of dynamic list. All your dynamic items has a settings “float: left” (it is how set up columns in dynamic content). Since all dynamic items has different height, some of them may prevent others proper floating

You have few ways to fix it:

Regards,
Anna

2 Likes

Ahhh, I don’t understand how to work the masonry piece with the dynamic data. But that’s a good fix. Appreciate it. Now I just need to figure out why the filter isn’t working on the events dynamic data.

For create masonry grid give some class to dynamic list and use CSS columns settings (right under font adjustments).
Dynamic items should be display: inline-block and width 100%

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?

Yes, Ben, you are right. CSS masonry makes content flow from up to down in columns. I think only jQuery masonry plugins can make it from left to right.

About pagination, I am using tabs for accomplishing this ( http://sapdesign.webflow.io/portfolio ). Every tab pane has dynamic list inside. You can control how many post will be on each list.

Thanks so much for your help! I figured out pagination using the limit option. For now I only have about 45 blog posts, or around there. So I fixed using that option.

1 Like

Always glad to help. :slight_smile: Feel free to ask if you have more questions.

1 Like

I appreciate all your insights!! :smiley: And as you can tell, I ask a lot of questions so I’m sure you’ll hear from me again!! :joy: :joy: :joy:

1 Like