CMS Collection list has broken gap

[clevy (Chris Levy)]

Collection layout is broken on the second and fourth row. What would cause this to happen?

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[PeterDimitrov (Webflow Expert Partner)]

Hello @clevy

Can you share your read-only link?

Piter

[clevy (Chris Levy)]

Hi @PeterDimitrov please find the read-only link below. Thanks!

https://preview.webflow.com/preview/urban-seed-inc?utm_source=urban-seed-inc&preview=3d2ca91de2f3fad10dda1d3ce898a245

[PeterDimitrov (Webflow Expert Partner)]

Great! The collection list on the blog page?

[clevy (Chris Levy)]

@PeterDimitrov collection list on “follow your food” page. Thanks!

[PeterDimitrov (Webflow Expert Partner)]

I can recommend using flex box. Here’s a screen record > https://www.useloom.com/share/a28b2bd308d14316bc378a3c0c10c771

Hope this helps

Piter

[nwdsha (Naweed)]

Hey @clevy,

I was about to show the exact same solution as @PeterDimitrov but I will show you a screenshot instead. The best way to use flexbox with CMS items is to make the CMS collection list a parent flexbox, and the CMS items a ‘flexbox child’. This is the proper way to use flexbox, not using a div block individually.

Best,
Naweed

[clevy (Chris Levy)]

@PeterDimitrov @nwdsha Thank you so much! Your documentation was very clear.