Aspect Ratio Boxes with CSS Grid

Maintain aspect ratios for content with CSS Grid.

Source Code

.aspect-ratio-box {
    display: grid;
}
.aspect-ratio-box::before {
    width: 100%;
    grid-area: 1 / 1 / 2 / 2;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    content: '';
}
.content {
    grid-area: 1 / 1 / 2 / 2;
}