How can I make my divs perfectly square with a ratio of 1:1 and retain their square shape when resizing responsively in Webflow?

To create perfectly square divs (1:1 aspect ratio) that remain square across all screen sizes in Webflow, follow these steps using reliable CSS techniques and Webflow's layout tools.

1. Use Padding to Maintain Square Ratio

• Set a width in percentage or pixels depending on your layout needs.
• Set the padding-top or padding-bottom to 100% on the same element.
• This enforces a 1:1 aspect ratio because Webflow calculates padding relative to width.

Example:

• Set your Div Block's width = 100% (or any specific width).
• Set padding-top = 100% (under Spacing settings).
• Leave height as auto or blank—Webflow calculates height based on padding.

2. Use Relative Positioning for Inner Content

• Set the square Div Block to position: relative.
• Add child elements inside the div and set them to position: absolute with top/left/right/bottom = 0 to fill the square.
• This ensures internal content scales with the square.

3. Make It Responsive

• Because padding is based on width, the shape naturally scales with different screen sizes.
• Use percentage widths inside grid or flex layout containers to make the square respond to screen size changes.
• Test on all breakpoints in Webflow Designer to fine-tune margins or alignment.

4. Optional: Use Aspect Ratio (Modern Browsers Only)

• Webflow now supports the CSS aspect-ratio property.
• Select the div and under Style > Layout, set Aspect Ratio = 1 / 1.
• You must also define width or height for it to take effect.

Note: The aspect-ratio property has strong modern browser support but may not work in legacy browsers.

Summary

To keep divs perfectly square and responsive in Webflow, use padding-top: 100% or the aspect-ratio: 1 / 1 property along with a defined width. These methods scale consistently across screen sizes and ensure the 1:1 ratio is preserved.