Make a truly responsive square in CSS

A new css property aspect-ratio finally allows for a width and height responsive square without any JavaScript.

Browser Compatibility is as of April 2021 still limited to Chrome and Edge.

Here’s how it works!

Create two objects. A container and a square. Give the square an aspect ratio equal to one, and a width and max height of 100% of the parent container.

Optionally you can center the square within the parent, with the old position and transform trick…

I have not found a way to center the square, the more convenient way, by using Flexbox or Grid (yet?).

… as well as making the container resizable with the resize property from the textarea HTML object.

Here’s an example to play around with!

👨‍💻+🎨