SCSS

by Manju06

HTML

<body>


    <div class="banner">
        <img src="http://placekitten.com/301/301" alt="">
    </div>

    <div class="banner2">
        <img src="http://placekitten.com/301/301" alt="">
    </div>


    <div class="product-grid">
        <div class="item1">
                <img src="http://placekitten.com/301/301" alt="">
        </div>

        <div class="item2">
                <img src="http://placekitten.com/301/301" alt="">
        </div>

        <div class="item3">
                <img src="http://placekitten.com/301/301" alt="">
        </div>

        <div class="item4">
                <img src="http://placekitten.com/301/301" alt="">
        </div>
    </div>

    <div class="footer">
        <img src="http://placekitten.com/301/301" alt="">
    </div>
</body>

SCSS

.banner img{
    width: 100%;
    height: auto;
}

.banner2 img    {
    width: 100%;
    height: auto;
}

.product-grid   {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
}

.item1   {
    grid-column: 2/3;
    grid-row: 2/3;
    width: auto;
}

.item2  {
    grid-column: 3/4;
    grid-row: 2/3;
    width: auto;
}

.item3    {
    grid-column: 2/3;
    grid-row: 3/4;
    width: auto;
}

.item4   {
    grid-column: 3/4;
    grid-row: 3/4;
    width: auto;
}

.item1 .item2 .item3 .item4 img {
    width: 50%;
    height: auto;
}

.footer img {
    width: 100%;
    height: auto;
}