CSS网格空单元格问题

Question

我试图了解CSS网格的本质，这对我来说有点新。我想保持网格项目的响应速度并保持图像的纵横比。图像底部似乎有一个怪异的间隙。

我看着其他questions可能相似，但仍不确定。

这是我所拥有的

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;
}