Keep blocks inside the grid responsive squares

Design help Layout & Design
1

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

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-05-07 Π² 23.45.28
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-05-07 Π² 23.45.284112Γ—2658 410 KB

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-05-07 Π² 23.45.11
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-05-07 Π² 23.45.114112Γ—2658 413 KB

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-05-07 Π² 23.44.18
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-05-07 Π² 23.44.184112Γ—2658 370 KB

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-05-07 Π² 23.46.15
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-05-07 Π² 23.46.151774Γ—1680 93.4 KB

Here is my site Read-Only: [LINK](https://preview.webflow.com/preview/marias-exceptional-site-a17861?utm_medium=preview_link&utm_source=designer&utm_content=marias-exceptional-site-a17861&preview=52323500e20225b6b37ace5bafae930e&workflow=preview)
(how to share your site Read-Only link)

2

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.

1 Like