You might have encountered a situation where you needed a fully responsive square div.
In my case, I was working on a responsive portfolio kind of layout, and I soon realized it's pretty hard to get a responsive square based on the width.
However, I ...

Hashnode is a community-driven platform for developers to share knowledge, ask questions, and connect with peers in the tech industry. Developers can learn about new technologies, programming languages, and software development methodologies, engaging in discussions, and networking with fellow developers to expand their knowledge and grow their careers in tech.

Hashnode

I was working on a responsive portfolio kind of layout, and I soon realized it's pretty hard to get a responsive square based on the width. I found the perfect solution and will be showing you how to achieve this in CSS and even in Tailwind. The general concept is pretty simple. We want to create a percentage-based width div and use the same percentage as our padding-bottom.

Tailwind CSS responsive square divs

<p>aspect-ratio is supported on enough modern browsers so that this hack does not need to be abused anymore (it’s meant to prevent recursion, not deal with aspect ratios even though it works).</p>
<p>I think there’s a tailwind plugin for aspect-ratio until it lands in a full release.</p>
