CSS <ratio> Data Type - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Gallery layout */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Card base styling */
.card {
    background: linear-gradient(135deg, #6dd5fa 0%, #2980b9 100%);
    color: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.card .content {
    padding: 1rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.card figcaption {
    padding: 0.5rem 0.75rem;
    background: rgba(0,0,0,0.12);
    width: 100%;
    font-size: 0.9rem;
}

/* Examples of the CSS <ratio> data type via the aspect-ratio property */
.ratio-1-1 {
    /* a square: 1/1 (ratio) */
    aspect-ratio: 1 / 1;
}

.ratio-16-9 {
    /* widescreen: 16/9 (ratio) */
    aspect-ratio: 16 / 9;
}

.ratio-4-3 {
    /* classic photo: 4/3 (ratio) */
    aspect-ratio: 4 / 3;
}

/* Intrinsic media keeps its own ratio; constrain width instead */
.ratio-auto img {
    width: 100%;
    height: auto;
    display: block;
}

/* Fallback for older browsers (optional): padding-top technique for a 16:9 box */
/* .ratio-16-9 { position: relative; padding-top: calc(9 / 16 * 100%); height: 0; }
   .ratio-16-9 > * { position: absolute; inset: 0; } */
</style></head><body><div class="gallery">
    <figure class="card ratio-1-1">
        <div class="content">1 / 1</div>
    </figure>

    <figure class="card ratio-16-9">
        <div class="content">16 / 9</div>
    </figure>

    <figure class="card ratio-4-3">
        <div class="content">4 / 3</div>
    </figure>

    <figure class="card ratio-auto">
        <img src="https://placehold.co/400x200" alt="Placeholder image">
        <figcaption>Intrinsic image ratio</figcaption>
    </figure>
</div></body></html>