Keep blocks inside the grid responsive squares

[Maria_Mateo]

Hello!

I created a layout for a section which consists of 4 squares with a content. I put them in divblocks and then in 2 columns, 2 rows grid. But I cannot figure out how to make them responsive as squares. If I change the screen size even inside one breakpoint, the squares transform into those with different height and width. And I need them to be 1:1 and change the overall area.
I attach photos for better understanding.

Although I planned to design it a little bit different at first (with the fifth square as a top layer centered over 4 squares). But here I am not sure how to build, so maybe you could offer some explanation.
Thank you

---

Here is my site Read-Only: [LINK](Webflow - Maria's Exceptional Site)
(how to share your site Read-Only link)

[Romuald_Jay]

Hi

If you want square and responsive and two square = full width, you ve got to make square 50vw height and 50 vw width… on the grid level it’s better.

And you got to avoir big margins on the element. In you case maybe set the padding in vw too to avoid any overlap.