Vfrdtyky

I'm trying to understand the nature of css grid, im somewhat new to it. I want to keep my grid items responsive and maintain the aspect ratio of the images. It seems that there is a weird gap on the bottom of the images.

I look at other questions that could be similar, still not sure.

here is what i have

https://codepen.io/eliowl/pen/EOgNQe

html

<section id="about" class="about">

    <h3 class="text-center">About</h3>

    <section class="grid">

        <div class="grid-item --width3 ">

            <img src="https://images.unsplash.com/photo-1541807084-5c52b6b3adef?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0c64fc542895cda41529f98ed3808572&auto=format&fit=crop&w=634&q=80" alt="">

        </div>



        <div class="grid-item --width ">

            <img src="https://images.unsplash.com/photo-1541773477186-4133e93eb70e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da73715faa685433b42f4decb9f71a60&auto=format&fit=crop&w=634&q=80" alt="">

        </div>



        <div class="grid-item --width2 ">

            <img src="https://images.unsplash.com/photo-1541787975442-d5085a8ec678?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f6fc603cb3c4886ec55a1bff07ee7b53&auto=format&fit=crop&w=375&q=80" alt="">

        </div>



        <div class="grid-item   ">

            <img src="https://images.unsplash.com/photo-1541780050666-f64773a3d779?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9ce82bea4ecf5b343e5317a683fd8226&auto=format&fit=crop&w=634&q=80" alt="">

        </div>  





        <div class="grid-item  ">

            <img src="https://images.unsplash.com/photo-1541766029309-8d7fa5bb773b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f3d1bf633d2a601dd04a716acfce40be&auto=format&fit=crop&w=500&q=60" alt="">

        </div>              



    </section>

</section>

scss

.grid{

    display: grid;

    background-color: #fafafa;

    max-width: 1300px;

    clear: both;

    margin: 0 auto;

    grid-template-columns:1fr 1fr 1fr 1fr;

    grid-auto-flow: dense;



    grid-auto-rows: 100%;

}



.grid:after {

    content: '';

    display: block;

    clear: both;

}



.grid-item {

    display: flex;

    position: relative;

    overflow: hidden;

align-items:flex-start;

    grid-column: auto / span 2;

    grid-row: auto / span 4;







     img {

        width: 100%;

    }



}



.--width{

      grid-row: 2;

}





.--width2{

     grid-row: auto / span 4;

}