CMS Grid items overlap/cutout

Hi friends,
Newish to Webflow. Designed my site as a static portfolio but recently started to add dynamic blogs to it. I’m using CMS to do that and the first three items looked fine but when I add a fourth item that I want on a new row things start getting messy. By default, the two articles on the side are cut into half and when I try to make any changes the top three appear fine but the fourth one gets pushed on the bottom and gets cut off. I tried various tweaks between flex, margin, and padding. None of it helped, would love some help to understand how to fix and how to avoid such errors going forward.
Thanks!


Here is my site Read-Only: Webflow - Shreyas's Portfolio and Blog

Here is a read-only direct link: This is not a Blog but my growing publishing journey

Hey @shreyas11,

Welcome to the forum! Glad to have you here :grinning:

I recorded a quick demo to hopefully show you how to fix this layout: Screen Recording 2022-05-10...

Let me know if you get stuck!

Cheers

2 Likes

My friend that was so so helpful, not only just to help me fix that one issue but more so to help me understand how to think about designing better in Webflow. I fixed all the responsive issues as well and am so much happier with the clean look. Donating on your behalf to the charity on your bio. Cheers!

1 Like