Maintaining Aspect Ratio, Revisited

We finally have aspect-ratio.


This is not an in-depth look on how it is done, because Stephanie Eckles already wrote about aspect-ratio (and beyond) on Smashing Magazine, way better than I ever could.

The thing is, an article I wrote in 2018 on how to (mis)use CSS Grid to maintain aspect ratio to this day ranks high in popularity on this site. But now that aspect-ratio has excellent browser support, I want to make clear that we no longer need any hack, we can finally do this with one line of CSS:

.box {
	aspect-ratio: 16 / 9; /* for boxes with 16:9 aspect ratio */

In other words, I created this article and the accompanying CodePen so I could link to it in the 2018 article.