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 👍
Top comments (2)
If you can use vw for width you can make it even simpler.
width 25vw
height 25vw
Oh yeah did not think of that, that is a good solution! Thanks for sharing it