aspect-ratio

Boxes that keep their proportions

CaveatAn explicit height beats aspect-ratio every time. The one that catches people is implicit: a flex or grid parent stretches its children by default, and that stretch is a height.

FallbackSet align-items: start on the parent, or height: auto on the child. Then the ratio has room to do its job.

.tile { aspect-ratio: 16 / 9; width: 96px; }

/* or the parent stretch overrides it */
.row { align-items: start; }

Published 7 Aug 2026