[CSS] Use CSS Grid to create an asymmetric promo grid

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