Dynamic List grid layout breaks with long content

Hi guys

My main CMS blog page http://www.ignitemarketing.co/marketing-news formats very strangely no matter how I sort the posts (currently sorted by most recent to oldest).

Does anyone have any ideas why the list items at the bottom aren’t stacking up in full rows as they should be?

I’ve not been able to find anything in the formatting that could cause this. If I change the sort order they move around correctly but still with some blank columns.

It seems to be the same posts out of place each time as well.

Many thanks for any ideas! :slight_smile:

Hello @JamesLondesborough,
It seems you tried to use combination of display:block and float:left. But when all items has different height, it doesn’t work as you expecting.

For example, in your case, item #2 is higher than others and item #4 can’t go all the way to the left side.

There is 2 ways how to fix this issue:

  1. make all dynamic items same height

  2. do not use rows and columns for dynamic list and make items display: inline-block and float:none. For the best result I use line of custom CSS style in custom code area:

    .classname-of-dynamic-item { vertical-align: text-top; }



It is the result you will get

1 Like

Wow, that’s brilliant Sabanna. Makes perfect sense and thanks for the really quick reply!

1 Like

Always welcome :smiley: Glad to be useful

This is EXACTLY what I was searching for. Took all of 10 seconds to fix. You’re the hero of the day, Sabanna!

1 Like

:smiley: You are welcome!
Maybe this option will be useful for you too: Webflow Masonry grid ( #Pinterest), no Custom Code required

1 Like