Streaming live at 10am (PST)

Collection item don't fit

Hi,

I have a problem with my collection list, one collection item don’t fit good.
page: plastische chirurgie (folder: behandelingen)

https://preview.webflow.com/preview/mkaa?utm_medium=preview_link&utm_source=designer&utm_content=mkaa&preview=3f3b3cb4651833b59fa111892fa1b9b9&pageId=5e5ec7811e9f849775ed4d22&mode=preview

Kind regards
Nicolas


Here is my site Read-Only: *https://preview.webflow.com/preview/mkaa?utm_medium=preview_link&utm_source=designer&utm_content=mkaa&preview=3f3b3cb4651833b59fa111892fa1b9b9&pageId=5e5ec7811e9f849775ed4d22&mode=preview

Hi @nicolas.winderickx This is standard behaviour as your block element doesn’t fit it will go automatically under. You’re looking for MASONRY grid. There are few options how to achieve it.

Simplest way is to choose number of columns for text. (images are treated as text - inline elements )
here is an EXAMPLE but I would not recommend it in this situation.

Second option is to use CSS Grid with dense option enabled. You can find more in YT.

Third option is to use JS like MASONRY JS but out there is more libraries for Masonry layout.

Thank you!

Have a nice day.

1 Like