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 👍