Create perfectly square divs within a grid

Hi guys,

I am having issues with making my divs perfectly square with a ratio of 1:1 and can’t seem to make it work. The idea is to make the divs retain their square shape especially when resizing responsively.

I know it can be done if you drop in an image element and as long as the image is perfectly square much like this example https://preview.webflow.com/preview/kathanna?utm_medium=preview_link&utm_source=showcase&utm_content=kathanna&preview=2018db960ca1d2078890c7bd2bd11626

Here’s what I have done so far https://preview.webflow.com/preview/jacks-fresh-project-bbbec6?utm_medium=preview_link&utm_source=designer&utm_content=jacks-fresh-project-bbbec6&preview=131df2be437dca16858a2dceaf082f20&mode=preview

Any help would be greatly appreciated.

Thanks,

Jack


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

Hey Jack!

That’s a cool example website. I took a look in the designer and I’m pretty sure that all of her images were squares to begin with. Additionally, the columns are set to 1FR, which distributes the size accordingly based on the number of elements in the grid.

I haven’t found a sure solution to creating perfectly-square elements, and I’d welcome any solution! But I’ve found a workaround which is to set the height of your elements to be the VW (view width) that corresponds to the number of columns. For example, your grid has 4 columns - you set the height to 25VW. Your result will be square elements.

Hi Hunter,

Thanks for getting back to me.

Yeah it seems to only work if the images are square to begin with and within an image element not a div. I have tried the image element route and it works fine but then I’m having issues dropping a div on top of the image element. It seems the only way I can achieve the result I require is by dropping an image into a div as the background, but then I can’t get perfect 1:1 squares :confused:

I’ve tried your suggestion using 25VW in the height, without much luck. Thanks anyway!

Jack,

Don’t give up yet! So create your Grid, and inside each grid panel you need a DIV container. Then you can set the background image on the Div to the images that you’re trying to use. Just make sure you position the image-background in the properties panel to fit properly! Once your image backgrounds are set, then you can set the sizing.

Something to note: DIV containers without any elements inside will default to empty - you need to set a fixed width(100%) on the divs. After setting the rows to 1FR, then go to the div height and set that value to the VW of however many columns you have. 4 Columns = 25vw

This issue not related to grid or flexbox.

Try this (great and simple trick)

"Steps":

  1. Add image (Better than background image (SEO/Site speed))

  2. Link block Remove min-height/width (From all breakpoints)
    image

  3. Wrapper - padding-top: 100%; position: relative;

  4. Text absolute (Like this the wrapper declare the height of the div)

  5. Remove background (We use image element):
    image

  6. Image setting:

Done :slight_smile: Put any image size you want:

mobile:

Site tree position “summary”:
image

Add opacity to the image for better contrast. Done :slight_smile:

4 Likes

Hi Siton,

You’re an absolute legend! That has worked perfectly.

Thank you so much for your help, it’s greatly appreciated.

Cheers,

Jack

1 Like

Hi Hunter,

Thanks for your response and your help with this but the 25vw didn’t work for me (maybe I’m doing something wrong).

Siton’s method below seemed to work for me.

Thanks again.

Jack

Great :slight_smile: you welcome

Thank you so much! This helped a lot!

1 Like