Responsive square, HOW ? 🤔, here's the solution !

The problem

I've always got some design ideas for galleries in a grid form, but it always required square cover, the only problem was that it wasn't really responsive if I was fixing a height and width in px, but doing the same with % em rem was a nightmare until now

the solution

The solution is quite simple when you think of it, if we take a div with a width in percentage then we apply a padded bottom on a:: after pseudo element, The padding is basing it’s width from the parent container, so when we set padding-bottom to 100%, it basically means 100% of its width, so with this you get a responsive square

I hope this post helped you with this struggle 👍

Comments

[Mario Kober]

If you can use vw for width you can make it even simpler.
width 25vw
height 25vw

[Moulun Kevin]

Oh yeah did not think of that, that is a good solution! Thanks for sharing it