In this lesson, we'll create an asymmetric promotional area where our promos get progressively smaller. We'll use CSS Grid to keep our HTML to 6 semantic lines to make this work. We'll create our asymmetry directly in our grid definition and not in our HTML by using a combination of grid-template-columns and the fr unit in CSS.

 

.banner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: minmax(30vh, 1fr) minmax(30vh, 1fr);
    grid-gap: 1rem;
}

.promo:first-child {
    grid-column: 1 / 2;
    grid-row: span 2;
}

.promo:nth-child(2) {
    grid-column: 2 / 4;
}

// Non-grid Styles
.promo {
    background-image: url(https://images.unsplash.com/photo-1587892873372-07cbf8ec46f3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
    background-size: cover;
    background-color: lightgreen;
    background-blend-mode: overlay;

    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-size: 2rem;
    padding: 1rem;

}
HTML SCSSResult
EDIT ON
<section class="banner">
    <a href="#" class="promo">This is a headline for a promo space</a>
    <a href="#" class="promo">This is a headline for a promo space</a>
    <a href="#" class="promo">This is a headline for a promo space </a>
    <a href="#" class="promo">This is a headline for a promo space</a>
</section>
    



Resources1×0.5×0.25×Rerun